JQuery: мне нужно антиспам на моей функции

Question

У меня есть функция, которая показывает div в моей навигации при нажатии, и вы можете переключать его, чтобы он скрывался при повторном нажатии.

Проблема в том, что вы можете спамить по нему, чтобы анимация продолжала работать и нарушала работу div.

Мне нужен какой-то щелчок антиспама, я хочу, чтобы он дождался первой анимации.

Вот код:

$("#navDown").click(function(){
if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    })
    $(".navExCon").delay(300).fadeToggle(150);
    }
else if($("#navExpand").height()===150)
    {
$(".navExCon").fadeToggle(150);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").delay(300).animate({
        height: 0
    });
    };

});

ОБНОВЛЕНИЕ / решение

Это то, что я сделал: note: было бы лучше с использованием цвета на этом сайте, чтобы увидеть изменения.

$("#navDown").click("slow",function(){ // added time "slow": 600 u i think.
  if($("#navExpand").height()===0){
    $('#navArrow').animateRotate(0, -180);
    $("#navExpand").animate({
        height: 150
    },200)                    // added some time
    $(".navExCon").fadeToggle(100);
    }
    else if($("#navExpand").height()===150)
    {
    $(".navExCon").fadeToggle(250);
    $('#navArrow').animateRotate(180, 0);
    $("#navExpand").animate({
        height: 0
    },200);                  // added some time
    };
});

Answer 1

Вы можете иметь функцию обратного вызова, когда анимация закончена:

var animating = false;
$("#navDown").click(function(){
    if (animating) {
        return; // Don't start new animation
    }
    animating = true;

    if($("#navExpand").height()===0){
        $('#navArrow').animateRotate(0, -180);
        $("#navExpand").animate({
            height: 150
        })
        $(".navExCon").delay(300).fadeToggle(150, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
    else if($("#navExpand").height()===150)
    {
        $(".navExCon").fadeToggle(150);
        $('#navArrow').animateRotate(180, 0);
        $("#navExpand").delay(300).animate({
            height: 0
        }, function() {
            // Will be called after animation is finished
            animating = false;
        });
    }
});