javascript - 单击需要完成，然后才能再次激活

我正在制作一种简单的幻灯片演示，可以使用上一个和下一个按钮进行导航。

我设置此方法的方式是，在其中装有7个幻灯片的容器中，所有幻灯片的大小均与该容器相同，左侧放置100％，200％等。

按钮为marginLeft设置动画，以转到下一张或上一张幻灯片。

$('#slideArrowRight').click(function(){
        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();
        var maxSlides = $('.slideContainer').length - 1;
        var maxWidth = maxSlides * slideWidth;
        var negative = 0 - maxWidth;

        if (parseFloat($(allSlides).css('marginLeft')) <= negative) {}
        else {      $(allSlides).animate({marginLeft: "-=" + (slideWidth) + "px"}, {duration:200});        }

    });

我正在使用一条if语句来检查是否达到了marginLeft的最大数量，因此它无法继续进行下去。

这就是我想出的。并猜测什么东西实际起作用xD
（对于javascript和jQuery来说是相当新的，是的，如果东西开始起作用，我会退出）

但是，如果我非常快地单击按钮，则该函数会在函数堆栈中排入最后一张幻灯片。并且在单击时未达到最大marginLeft。

因此，我的问题是如何获取它，以使该函数无法运行，除非该函数完成了？

我尝试.finish（），但是立即取消了动画，这不是我想要的。我主要想要它，除非该函数不在队列中，否则该函数无法执行。

最佳答案

您应该使用简单的标志animationUnderExecution，该标志在函数的开头设置为true，在结尾设置为false。

首先在事件函数之前定义标志：

var animationUnderExecution = false;

现在在函数内部（开始时）检查是否正在执行另一个动画，并将flag设置为true：

if (animationUnderExecution) return;
animationUnderExecution = true;

现在，您必须在动画结束时将flag设置为false：

$(allSlides)
    .animate({marginLeft: "-=" + (slideWidth) + "px"},
        {duration:200},
        complete: function() {
            animationUnderExecution = false;
    });

摘要应如下所示：

var animationUnderExecution = false;
$('#slideArrowRight').click(function(){

        if (animationUnderExecution) return;
        animationUnderExecution = true;

        var allSlides = $(this).siblings('.slideContainer');
        var slideWidth = allSlides.width();
        var maxSlides = $('.slideContainer').length - 1;
        var maxWidth = maxSlides * slideWidth;
        var negative = 0 - maxWidth;

        if (parseFloat($(allSlides).css('marginLeft')) <= negative) {}
        else {
            $(allSlides)
              .animate({marginLeft: "-=" + (slideWidth) + "px"},
                  {duration:200},
                  complete: function() {
                      animationUnderExecution = false;
                });
        }

    });