Почему параметр функции занимает слишком много времени?

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. Для всех целей и задач функция работает. Единственная проблема заключается в том, что для загрузки требуется довольно много времени. До такой степени, что иногда мой браузер просит остановить операцию. Может ли кто-нибудь объяснить мне, почему это так? Любые потенциальные возможности для оптимизации?

EDIT: Я вижу, что ваши ребята указывают на рекурсию. Оглядываясь назад, это имеет смысл. Это приводит меня к другой проблеме.

При перемещении непосредственно вне функции мой HTML не признает мой параметр «why hello there». Код, который предназначен для его вызова, - это просто <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 и затем вызвать его себе снова, в конечном итоге вызывает ошибку переполнения стека.

Move 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, затем консоль в хроме) вы должны увидеть это: Maximum call stack size exceeded error