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

Question

我正在制作一种简单的幻灯片，其中包含用于导航的下一个和上一个按钮。

我设置的方式是有一个容器，里面有 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() 但这会立即取消动画，这不是我想要的。我主要想要它，以便函数无法执行，除非该函数不在队列中。

Answer 1

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

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

var animationUnderExecution = false;

现在在你的函数中(在开始处)检查你是否正在执行另一个动画并将标志设置为 true:

if (animationUnderExecution) return;
animationUnderExecution = true;

现在，当动画完成时，您必须将标志设置为 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;
                });
        }

    });