动画完成后启用点击答案

【问题标题】：enable click after animation is done动画完成后启用点击
【发布时间】：2014-06-12 10:29:30
【问题描述】：

我制作了一个与计数器相结合的图像滑块，每次当用户单击按钮时，图像就会滑动，并且计数器中会添加一个 +1 值。但目前用户可以发送垃圾邮件按钮，该按钮将计数器的值设为 20，而只有 2 张图片滑动。

所以我试图将点击功能延迟大约 500 毫秒，以便与动画相吻合。或者在动画完成之前禁用点击功能。

目前我在其中构建了一个 setTimeout ，但它只是延迟了一切，该按钮仍然是垃圾邮件，因此计数器中的值仍然加起来。它只会延迟初始动画/点击。

 $(".next").click(function(){
setTimeout(function(){
  $("body").find(".output").html(function(i, val){return val*1+1});
  $("body").parent().find("img:last").stop().animate({'margin-left': '-100%',}, 500,
    function(){
      $(this).remove();  
    });
  },500)
 })

如果您想查看，我已经创建了一个 codepen 示例：http://codepen.io/anon/pen/sunKg

【问题讨论】：

使用一个gobal变量来保存动画的状态：var isBusy = true;
@VDesign 我可以理解为什么我可以使用变量，但我不知道如何编写它。您能否查看我的 codepen 示例？
用代码示例查看我的答案

标签： jquery delay settimeout

【解决方案1】：

您已将 div 用作下一个上一个按钮。使用按钮标签，您将在点击时禁用按钮。之后，当动画完成后，您可以再次启用它...

【讨论】：

【解决方案2】：

使用全局变量来存储动画的状态：

JS 代码

var isBusy = false;

$('.next').click(function() {
    if(!isBusy) // check if busy
    {
        isBusy = true; // set busy

        //do stuff here

        $("body").parent().find("img:last").stop().animate(
            {'margin-left': '-100%',}, 
            500,
            function(){
                // do other stuff here when animation is completed

                isBusy = false; // set busy to false
            });
        },500);

    }
});

其他可能性

您也可以使用off() 方法来移除按钮的点击事件，直到动画完成。然后再次为按钮启用事件处理程序。

更多关于off() in jquery

【讨论】：