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

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文件中填写“为什么问好”参数时，它的打印效果与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

这是因为递归，该函数一次又一次地调用自身

每次函数调用其自身时，它都会更改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控制台），则应该看到以下内容： 超出最大调用堆栈大小错误