為什么功能參數加載需要這么長時間？

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控制台），則應該看到以下內容： 超出最大調用堆棧大小錯誤