clearInterval没有停止函数velocity.js的标注脉冲由setInterval启动

Question

我正在使用velocity.js进行脉冲动画。 我有简单的代码 在HTML中，我有： XXXXXXXXXXX

在javascript中：
VAR blinkNext = 0; //全局变量

var blinkBtn = function() { 
     $("div").velocity("callout.pulse"); 
     }; 

blinkNext = setInterval(blinkBtn, 1); 


clearInterval(blinkNext); // <-- Not working 

预期行为：div部分应该脉冲然后停止。 问题：clearInterval不停止脉冲标注。 我搜索了很多，但找不到任何东西

Answer 1

你有间隔设置为只有一毫秒，所以你每毫秒调用.velocity()，我假设这些呼叫排队。所以当你清除间隔时，动画停止需要很长时间。

这是一个jsfiddle，它演示了原始代码的问题。点击“运行>”，然后尽可能快地点击“停止”按钮。你可以看到有多少次“闪烁”被写入控制台日志。这是动画在停止前会运行多少次，但最终会停止。

而不是使用setInterval()的，你可以做到以下几点：

var blinking = true; 

function blink() { 
    $('#btnNext').velocity('callout.pulse', function() { 
     // This anonymous function is called when the animation completes. 
     // If we should be blinking, then we call blink() again. 
     if (blinking) { 
      blink(); 
     } 
    }); 
} 

// Initially start the animation. 
blink(); 

// This button shows how you can stop and restart the animation. 
$('#toggleBtn').click(function() { 
    blinking = !blinking; 
    if (blinking) { 
     blink(); 
    } 
}); 

jsfiddle