Question

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

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

但是前一个效果中的setInterval（已经被删除）仍然在运行。通过调用clearInterval取消任务后，我应该在哪里放置stop()？

以下是一个例子：

$('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);

Answer 2

不确定此方法的官方支持，但在阅读jQuery源代码后，我似乎找到了解决方案。给队列任务的回调函数提供了一个未记录的第二个参数。这是当前效果的钩子的目标。我们需要的属性相应地命名为stop。如果设置，则只有在stop()或finish()方法停止手动效果的情况下才会调用闭包。它没有被清除或设置新队列。

以下是一个例子：

$('body')
    .queue(function(next, hooks) {
        var i = 0, el = this;

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

        hooks.stop = function() {
            clearInterval(interval);
        }
    })
    .queue(function(next) {
        this.style.backgroundColor = '#005';
        next();
    });

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

如何停止jQuery的队列自定义任务，里面有setInterval（）？

2 个答案: