Как остановить события клика от очередей на несколько кликов?

Question

Что мне нужно сделать, так это то, что если мы нажмем кнопку "Отправить", должен появиться конкретный элемент div. Вот мой код: http://jsfiddle.net/7tn5d/ Но если я нажимаю кнопку "Отправить" несколько раз, функция вызывает своего рода очередь и запускается одна за другой. Есть ли способ сделать недействительными другие клики, когда текущая анимация запущена? Код:

 animating = 0;
    doneanim = 0;
    $(function () {
        $("#submit_tab").click(function (e) {
            if (animating == 1) return;
            animating = 1;
            $("#submit_cont").show("blind", {}, 1000);
            animating = 0;
        });
    });

Answer 1

Вы почти правильно поняли семафор! Просто в jQuery show(), вы должны будете поставить сброс семафора в качестве аргумента. Вот исправленная версия - http://jsfiddle.net/snikrs/xe5A3/

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() {
            animating = 0;
        });
    });
});

Answer 2

Чтобы предотвратить выполнение действия несколько раз, просто прекратите предыдущую анимацию. Так:

$('#submit_cont').stop().show("blind",{},1000);

Однако я заметил, что вы пытались предотвратить запуск анимации, если анимация уже запущена. Хотя для показа div требуется 1 секунда или 1000 миллисекунд, выполнение условия не приостанавливается, пока анимация не будет завершена. Вы должны определить функцию для запуска после завершения анимации, например так:

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() { animation = 0; });
    });
});

Надеюсь, что это помогло...

Answer 3

Вы можете использовать :animated селектор для проверки:

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $("#submit_cont");
        if (!$cont.is(':animated')) {
           $cont.show("blind", {}, 1000);
        }
    });
});

Теперь, если вы придерживаетесь идеи внешнего семафора, то лучше придерживаться этого с помощью .data() вместо использования глобальной переменной:

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $('#submit_cont'),
            animating = $cont.data('isAnimating');
        if (animating) {
           return;
        } else {
          $cont.data('isAnimating', 1);
          $("#submit_cont").show("blind", 1000, function() { $cont.data('isAnimating', 0); });
        }
    });
});

Answer 4

Вы можете добавить $("#submit_cont").clearQueue(); после окончания анимации:

 $("#submit_tab").click(function (e) {
     $("#submit_cont").show("blind", 1000, function() {
         $("#submit_cont").clearQueue();
     });
 });

Обновленный JSFiddle

Answer 5

Как то так ( см. Документацию):)

$("#submit_cont").show("blind", function(){
    animating = 0;
});

Answer 6

Я нашел для этого другое решение, которое, на мой взгляд, выглядит чище:

var tab = $("submit_tag");
tab.on("click", function(){
    var cont = $("submit_cont");
    var animating = tab.queue("fx").length;
    if(animating === 0){
        cont.show("blind", {}, 1000);
    }
});