1

所以这就是我的 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 代码的窍门，所以请为新手的错误找借口。

4

2 回答 2

3

你陷入了无限递归。当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');
于 2013-11-07T10:23:25.090 回答
2

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

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

移到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 错误

于 2013-11-07T10:23:22.303 回答