Почему этот javascript (jQuery) не заходит в бесконечный цикл?
Я читал замечательную статью о событиях привязки и отмены привязки (потому что я новичок в js, использующем jQuery) на Блог Карла Сведберга, и меня полностью озадачила эта часть кода (упрощенная для краткости):
function addItemUnbind() {
$Add a button but it won't have it's event added;
addItemUnbind();
});
Почему, помещая одну и ту же функцию внутрь себя, она не выполняет бесконечный цикл? Однако он используется для повторной привязки события к элементу ...!?
Ответы 4
Насколько я могу судить, ваш пример будет. Однако ваш пример не совпадает с примером на веб-сайте, на который вы ссылаетесь.
function addItemUnbind() {
$('#list6 li.special button')
.unbind('click')
.bind('click', function() {
var $newLi = $('<li class = "special">special and new <button>I am new</button></li>');
$(this).parent().after($newLi);
addItemUnbind();
});
}
В этом примере addItemUnbind вызывается, когда пользователь нажимает кнопку.
Потому что вызов находится внутри внутренней функции.
Например. Он кое-что делает в addItemUnbind (), и одна из этих вещей - привязать функцию к нажатию кнопки.
Затем эта функция объявляется, например. внутри addItemUnbind () есть:
.bind('click', function() {
var $newLi = $('<li class = "special">special and new <button>I am new</button></li>');
$(this).parent().after($newLi);
addItemUnbind();
}
Код в фигурных скобках здесь оценивается не при вызове addItemUnbind (), а при щелчке.
Ответ скрывается в части кода, который вы вынули. То, что вы опубликовали, действительно представляет собой бесконечный цикл. Однако вот более полный (но все же упрощенный) пример, измененный из связанного сообщения в блоге:
function addItemUnbind() {
bind('click', function() {
addItemUnbind();
});
}
Вызов addItemUnbind находится внутри замыкания - новой анонимной функции, отдельной от функции addItemUnbind, которая ее создала. Вместо того, чтобы вызывать сразу, ссылка на новую функцию передается в функцию привязки. Итак, если функция привязки выглядела так:
function bind(eventName, eventHandler) {
eventHandler();
}
тогда у вас будет бесконечный цикл, потому что вызов eventHandler приведет к addItemUnblind. Но если это выглядит так:
function bind(eventName, eventHandler) {
this.events[eventName] = eventHandler; // save the event handler to call when an event happens
}
тогда нет проблем. Он не вызывает addItemUnbind, он просто сохраняет ссылку на функцию, которая вызовет ее позже.
Эх .... как и во многом .... "Наблюдение Даниэля!". По общему признанию, тоже была аномалия в том, как я думал, что обработка событий работает, из-за чего я бегло просматривал статью над тем, что, как я думал, я уже знал. Теперь я ясно вижу благодаря вашим осторожным объяснениям.