单击需要在再次激活之前完成

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;
                });
        }

    });

单击需要在再次激活之前完成

click needs to finish before activating again

javascript

jquery

slideshow