Javascript 为什么加载函数参数要花这么长时间？

这就是我的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');
}

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
打开盒子（“为什么在那里打招呼”）；
}

当我在JS文件中填写'Why hello there'参数时，它会像HTML中一样打印。无论出于何种目的，该函数都可以工作。唯一的问题是加载需要相当长的时间。有时我的浏览器会要求停止操作。有人能解释一下为什么会这样吗？有任何潜在的优化途径吗

编辑：我明白你们关于递归的观点。回过头来看，这是有道理的。这就引出了另一个问题

当直接移动到函数外部时，我的HTML不会确认我的“why hello there”参数。要调用它的代码只是一个简单的

---

我仍在尝试调用JS代码，所以请原谅我的新手错误

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

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

移动

open_框（'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');

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
}
//移到函数外部
打开盒子（“为什么在那里打招呼”）；

有关递归的更多信息：

另外，如果您查看控制台（F12，然后是chrome中的控制台），您应该会看到：
这是因为递归，函数正在一次又一次地调用自己

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

移动
open_框（'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');

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
}
//移到函数外部
打开盒子（“为什么在那里打招呼”）；

有关递归的更多信息：

另外，如果您查看控制台（F12，然后是chrome中的控制台），您应该会看到：
您正在陷入无限递归。当第一次调用
open\u-box
时，其中的最后一条语句是调用
open\u-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');
}

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
打开盒子（“为什么在那里打招呼”）；
}

到

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
}
打开盒子（“为什么在那里打招呼”）；
您正陷入无限递归。当第一次调用
open\u-box
时，其中的最后一条语句是调用
open\u-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');
}

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
打开盒子（“为什么在那里打招呼”）；
}

到

功能打开框（消息）{
变量框内容=“”+消息+“”；
document.getElementById（'functioner'）。innerHTML=box\u content；
}
打开盒子（“为什么在那里打招呼”）；
它陷入了无限循环。没有什么可以阻止它。你应该使用：（1）{fork（）}open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM。。。你明白了…它陷入了一个无限循环。没有什么可以阻止它。你应该使用：（1）{fork（）}open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用open_box创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM，然后调用OpenBox创建一些DOM。。。你明白了。。。