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;

现在在你的函数内部（在开头）检查你是否正在执行另一个动画并将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;
                });
        }

    });

点击需要完成再次激活之前

1 个答案: