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

Posted 2023-05-08

【中文标题】如何防止多次播放动画 - Jquery

【英文标题】：How to prevent playing an animation more then once - 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）

【参考方案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();