如何防止多次播放动画 - Jquery答案

【问题标题】：How to prevent playing an animation more then once - Jquery如何防止多次播放动画 - Jquery
【发布时间】：2016-09-19 11:41:32
【问题描述】：

当快速按下触发带有动画的函数的按钮时，我们通常会多次调用该函数，并且动画会一个接一个地播放。

如果你不想在动画还在播放的时候触发这个函数怎么办？

这是一个告诉孩子跳跃的函数的简单示例：

$('button').click(jumpKid);

function jumpKid () { 
 $kid
  .animate({'margin-bottom' : '+=' + 100} , 500)
  .animate({'margin-bottom' : '-=' + 100} , 500)
};

快速按下按钮会使孩子跳很多次。

我正在寻找 jquery/js 解决方案（而不是使用诸如“isKidJumping”之类的 var）

【问题讨论】：

标签： javascript jquery animation queue jquery-animate

【解决方案1】：

你可以使用:animated选择器，.is()

$("button").click(jumpKid);

function jumpKid () { 
 if (!$kid.is(":animated")) {
   $kid
   .animate({'margin-bottom' : '+=' + 100} , 500)
   .animate({'margin-bottom' : '-=' + 100} , 500)
 }
};

【讨论】：

【解决方案2】：

你可以使用jQuery.one()方法：

$('button').once('click', jumpKid);

function jumpKid() {
    $kid
        .animate({
            'margin-bottom': '+=' + 100
        }, 500)
        .animate({
            'margin-bottom': '-=' + 100
        }, 500);
}

【讨论】：

【解决方案3】：

您可以在动画播放时分离事件侦听器，并作为最后一次 .animate() 方法调用的回调，重新附加它：

var $button = $('button');
$button.on('click', jumpKid);

function jumpKid () {

 $button.off('click', jumpKid);
 $kid
  .animate({'margin-bottom' : '+=' + 100} , 500)
  .animate({'margin-bottom' : '-=' + 100} , 500, function(){
      // In a callback function for the last .animate() call, we'll re-attach the event listener:
      $button.on('click', jumpKid);
  });
};

【讨论】：

【解决方案4】：

感谢所有答案。我还找到了一个非常易于使用和理解的解决方案：

$('button').click(function(){
  if ($kid.queue().length === 0 ){
    jumpKid();
  }
});


function jumpKid () {
    $kid
    .animate({'margin-bottom' : '+=' + 100} , 500)
    .animate({'margin-bottom' : '-=' + 100} , 500)
}

$kid.queue() 将返回一个存储对象动画的数组，因此 $kid.queue().length 将显示存储了多少动画。

例如：当你使用“$kid.animate...”时，$kid.queue().length 将返回 1。

因此，我们可以使用 $kid.queue().length 来阻止 jumpKid 函数被触发！万岁！

【讨论】：

【解决方案5】：

您可以在其中小间隔检查：

setInterval(function() {
   $("button").click(jumpKid);
},100);

或者只是在跳转的类之间切换：

$("button").click(function() {
   kid.removeClass("jumped"));
}
if(!kid.hasClass("jumped")) jumpKid();

【讨论】：