Как jquery обрабатывает вложенные функции и синхронизацию событий? - PullRequest
Новая
       19

Как jquery обрабатывает вложенные функции и синхронизацию событий?

4 голосов
/ 17 апреля 2011

Есть несколько вещей, которые меня действительно беспокоят в отношении того, как jquery обрабатывает вложенные функции (не до такой степени, что я не могу заснуть, но это происходит), и я бы хотел, чтобы эксперт по jquery мог объяснить, как все это работаетМне кажется.

Допустим, у вас есть следующий HTML-код: 

<button id="first">click me first</button>
<button id="second">click me next</button>

и следующий код jquery: 

$(document).ready(function() {
    $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
        });
    });
});

Появится диалоговое окно, еслиВы нажимаете кнопку first, а затем кнопку second.

Я понимаю, что jquery создает экземпляр функции $('#first').click(), когда DOM готов, и вызывает ее, когда кто-то нажимает на кнопку first.

Однако меня удивляет следующее:
[Q1] - это функция $('#second').click(), которая также создается на DOM ready или только когда вызывается $('#one').click()?

Теперь, когда вы смотрите на код jQuery, ничего не происходитэто «держит нас» в функции $('#first').click(), то есть когда пользователь нажимает кнопку first, должна быть запущена функция $('#second').click(), и мы должны немедленно выйти из функции $('#one').click().Однако после нажатия кнопки first jquery должен каким-то образом сохранять $('#second').click() в памяти на неопределенный срок, если пользователь нажимает кнопку second.

[Q2], как jquery знает, как сохранить$('#second').click() работает в памяти до тех пор, пока пользователь не нажмет на кнопку second после нажатия кнопки first?

Наконец, скажем, вы хотели изменить свой код так, чтобы пользователь должен был нажать на кнопкуКнопка second в течение 10 секунд после нажатия кнопки first, чтобы появилось диалоговое окно:

[Q3] как бы вы реализовали это, чтобы jQuery знал, что нужно прекратить прослушивание событий щелчка накнопка second через 10 секунд?

Ответы [ 3 ]

4 голосов
/ 17 апреля 2011

Q1 - JS просто загрузит определения функций.Он не запустится, если они явно не вызваны / не вызваны.В этом случае он просто прикрепит обработчик события к #first и будет ждать, пока кто-нибудь не нажмет кнопку, чтобы запустить событие.Это заставит вторую функцию присоединиться ко второй кнопке.

Q2 Опять же, это не jQuery, это JavaScript, выполняющий всю работу.Метод просто присоединяется к элементу DOM и запускается по событию, к которому он прикреплен.JS похож на любой язык программирования и будет хранить все методы и переменные в своей памяти.

Функция второго щелчка фактически не прикреплена ко второй кнопке, пока кто-то не нажмет первую кнопку.Это связано с тем, что при нажатии первой кнопки JS знает, как вызвать первый метод, который выполняет всю работу по присоединению второго метода ко второй кнопке.

Q3 Вы можете использовать setTimeout чтобы отсоединить этот метод от элемента DOM.

$(document).ready(function() {
    $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
            setTimeout(function(){$('#second').unbind('click');}, 10000);
        });
    });
});

Примечание Это отменяет привязку всех обработчиков событий щелчка от этого элемента DOM.Вы также можете отменить привязку этого конкретного метода, передав его в качестве параметра.Проверьте API документы для использования.

setTimeout: https://developer.mozilla.org/en/DOM/window.setTimeout

unbind: http://api.jquery.com/unbind/

1 голос
/ 17 апреля 2011

[A1] Вторая функция создается только при нажатии на #first, поскольку она является частью выполнения первого метода. Это также означает, что если вы нажмете #first n раз, вы должны получать n предупреждений для каждого нажатия на #second.

[A2] Функция укоренена в элементе #second. Пока этот элемент жив, javascript знает, как сохранить функцию.

[A3] Вам необходимо сохранить указатель на функцию и сделать setTimeout, чтобы очистить его. 

$(document).ready(function() {
    $('#first').click(function() {
        var secondFunction = function() {
            alert('test');
        };
        $('#second').click(secondFunction);
        setTimeout(function(){ $('#second').unbind('click', secondFunction); }, 10000);
    });
});

Возможно, лучшая реализация выглядит примерно так: 

$(document).ready(function() {
    var enabled = false;
    $('#first').click(function() {
        enabled = true;
        setTimeout(function(){ enabled = false; }, 10000);
    });
    $('#second').click(function() {
        if(enabled) {
            alert('test');
        };
    });
});
0 голосов
/ 17 апреля 2011

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

Второй вопрос: я не уверен, что вы спрашиваете.

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

$(document).ready(function(){
   setTimeout(removeEvent, 10000);
   $('#first').click(function() {
        $('#second').click(function() {
            alert('test');
        });
    });
});
function removeEvent(){
   $('#first').unbind('click');
}
...