Question

这就是我的Javascript的样子：

function open_box(message){
    var box_content = '<div id="overlay"><div id="box_frame"><div id="box">'+message+'<a href="javascript:reset_frame()"><div id="xbutton"><img src="elements/xbutton.png"></div></a></div></div></div>';
    document.getElementById('functioner').innerHTML = box_content;
    open_box('Why hello there');
}

当我在我的JS文件中填写'Why hello there'参数时，它就像在HTML中一样打印。对于所有意图和目的，该功能有效。唯一的问题是加载需要很长时间。有时我的浏览器要求停止操作。任何人都可以向我解释为什么会这样吗？任何潜在的优化途径？

编辑：我看到你们这些人关于递归的观点。回顾它，这是有道理的。这引出了另一个问题。

当直接移到函数外部时，我的HTML不会确认我的'为什么你好'参数。要调用它的代码只是一个简单的<a href="javascript:open_box()">。

我仍然试图深入调用JS代码，这是新手错误的借口。

Answer 1

你正陷入无限递归。当第一次调用open_box时，其中的最后一个语句是调用open_box本身，这无限发生。所以，要修改它改变

function open_box(message){
    var box_content = '<div id="overlay"><div id="box_frame"><div id="box">'+message+'<a href="javascript:reset_frame()"><div id="xbutton"><img src="elements/xbutton.png"></div></a></div></div></div>';
    document.getElementById('functioner').innerHTML = box_content;
    open_box('Why hello there');
}

到

function open_box(message){
    var box_content = '<div id="overlay"><div id="box_frame"><div id="box">'+message+'<a href="javascript:reset_frame()"><div id="xbutton"><img src="elements/xbutton.png"></div></a></div></div></div>';
    document.getElementById('functioner').innerHTML = box_content;
}
open_box('Why hello there');

Answer 2

这是因为递归，函数一遍又一遍地调用

每次函数调用self时，它都会更改DOM，然后再次调用self，最终导致堆栈溢出错误。

将open_box('Why hello there');移到该功能的外侧，如下所示：

function open_box(message){
    var box_content = '<div id="overlay"><div id="box_frame"><div id="box">'+message+'<a href="javascript:reset_frame()"><div id="xbutton"><img src="elements/xbutton.png"></div></a></div></div></div>';
    document.getElementById('functioner').innerHTML = box_content;
}

//Moved to outside the function
open_box('Why hello there');

有关递归的更多信息：http://en.wikipedia.org/wiki/Recursion

另外，如果您查看控制台（F12，然后是Chrome控制台），您应该看到：Maximum call stack size exceeded error

为什么函数参数需要这么长时间才能加载？

2 个答案: