javascript - 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 。单击“运行>”，然后尽可能快地单击“停止”按钮。您可以看到有多少次“闪烁”被写入控制台日志。这是动画在停止之前将运行多少次，但最终会停止。

而不是使用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