javascript - 如何停止内部有 setInterval() 的 jQuery 队列自定义任务？

Question

我在 jQuery 队列中有一个自定义动画效果任务。其中有一个 setInterval 调用。

一段时间后，stop() 函数被调用。它从队列中删除当前正在执行的任务的回调并开始执行下一个任务。

但是之前效果(已被删除)中的 setInterval 仍在运行。通过调用 stop() 取消任务后，我应该将要调用的 clearInterval 放在哪里？

这是一个例子:

$('body')
    .queue(function(next) {
        var i = 0, el = this;
        var interval = setInterval(function() {
            el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
            if (i > 5) {
                clearInterval(interval);
                next();
            }
        }, 1000);
    })
    .queue(function() {
        this.style.backgroundColor = '#005';
    });

setTimeout(function() {
    $('body').stop();
}, 1500);

https://jsfiddle.net/coderlex/tLd9xtjj/

Answer 1

将您的 interval 变量实例移到队列关闭函数之外，然后您可以在调用 stop() 时清除它。

var interval = null;   

$('body')
    .queue(function(next) {
        var i = 0, el = this;
        interval = setInterval(function() {
            el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
            if (i > 5) {
                clearInterval(interval);
                interval = null;
                next();
            }
        }, 1000);
    })
    .queue(function() {
        this.style.backgroundColor = '#005';
    });

setTimeout(function() {
    $('body').stop();
    if (interval != null) {
        clearInterval(interval);
        interval = null;
    }
}, 1500);