Как игнорировать активность мыши до завершения функции

Question

Я использую следующий код, чтобы выдвинуть div при наведении курсора мыши, подождать пару секунд и сдвинуть div назад.

$(document).ready(function()
    {$("#divider").mouseover(function () 
        {$("#slider").show("slide", {direction: "left"}, 1000).pause(2000).hide("slide", {direction: "left"}, 1000);}
    );}
);

Я уверен, что это просто, но у меня ограниченные знания Javascript / jQuery. Как сделать так, чтобы любая активность мыши на триггере игнорировалась до завершения анимации? Прямо сейчас, если, когда div открыт, вы наводите курсор мыши на область триггера, он «запоминает» и воспроизводит анимацию столько раз, сколько вы перемещали указатель через область триггера. Страница

Answer 1

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

$(document).ready(function() {
    function divider_mouseover() {
        $('#divider').unbind('mouseover');

        $("#slider")
           .show("slide", {direction: "left"}, 1000)
           .pause(2000)
           .hide("slide", {direction: "left"}, 1000, function() {
               $("#divider").mouseover(divider_mouseover);
           });
    };

    $("#divider").mouseover(divider_mouseover);
};

Answer 2

Не связывайте, не связывайте и не привязывайте, а используйте флаг, чтобы решить, следует ли вам заботиться о событии.

$(document).ready(function(){
    $("#divider").mouseover(function(){
        var $this = $(this);
        if($this.data('nomouse')) return;
        $this.data('nomouse',true);
        $("#slider")
        .show("slide", {direction: "left"}, 1000)
        .pause(2000)
        .hide("slide", {direction: "left"}, 1000, function() {
            $this.data('nomouse',false);
        });
    });
});

Привязка и открепление принадлежали одному Полу Айришу jQuery Anti-Patterns в yayQuery подкасте

Answer 3

Swizzle из обработчика событий (не уверен, что это работает, но что-то вроде этого):

var omo = function() {
    {$("#divider").mouseover(function () {});}
    slide();
}

var slide = function() {
    {$("#slider").show("slide", {direction: "left"}, 1000)
                 .pause(2000)
                 .hide("slide", {direction: "left"}, 1000);
    }
    {$("#divider").mouseover(omo);}
}

$(document).ready(function()
    {$("#divider").mouseover(omo);}
);