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

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 演示了原始代码的问题。单击 "Run >"，然后尽可能快地单击 "stop" 按钮。您可以看到 "blink" 写入控制台日志的次数。那就是动画在停止之前会运行多少次，但它最终会停止。

除了使用 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

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

clearInterval not stopping function having callout pulse of velocity.js started by setInterval

javascript

jquery

velocity.js