clearInterval 停止 setInterval 纯粹基于时间工作

Question

我是 JS/jQuery 的新手，对于在 x 毫秒（或运行 X 次之后）从运行停止 setInterval 函数的用法感到很困惑，这显然发生在 clearInterval 上。我知道这个问题以前也有人问过，但帮不了我。

如你所见，它以 1000 毫秒的延迟开始，然后重复 9000 毫秒（或者在运行 3 次之后更好？？），然后它需要停止。这样做最理想的方法是什么？我无法正确使用 clearInterval 函数。感谢您的回答！

var elem = $('.someclass');

setTimeout(function() {
    setInterval(function() {
        elem.fadeOut(1500);
        elem.fadeIn(1500);
    },3000);
},1000);

Answer 1

要停止间隔，您需要保留 setInterval returns:

的句柄

setTimeout(function() {
    var cnt = 0;
    var handle = setInterval(function() {
        elem.fadeOut(1500);
        elem.fadeIn(1500);
        if (++cnt == 3) clearInterval(handle);
    },3000);
},1000);

Answer 2

创建一个计数器，并保留对您的间隔的引用。当计数器达到 3 时，清除间隔：

var elem = $('.someclass');

setTimeout(function() {
    var counter = 0;
    var i = setInterval(function() {
        elem.fadeOut(1500);
        elem.fadeIn(1500);
        counter++;
        if (counter == 3)
            clearInterval(i);
    },3000);
},1000);

Answer 3

3次后清除间隔即可：

setTimeout(function() {
    var times = 0;
    var interval = setInterval(function() {
        elem.fadeOut(1500);
        elem.fadeIn(1500);
        if (++times > 3) clearInterval(interval);
    },3000);
},1000);

Answer 4

鉴于您尝试做的事情是相当静态的，为什么不简单地添加延迟并忘记所有计时器。:

var elem = $('.someclass');
elemt.delay(1000).fadeOut(1500).fadeIn(1500).delay(3000).fadeOut(1500).fadeIn(1500).delay(3000).fadeOut(1500).fadeIn(1500).delay(3000);

或者运行如果你想减少代码大小，可以在一个小循环中使用上面的代码：

elemt.delay(1000);
for (var i = 0; i < 3; i++){
   elemt.fadeOut(1500).fadeIn(1500).delay(3000);
}

clearInterval 停止 setInterval 纯粹基于时间工作

clearInterval stopping setInterval working purely time based

javascript

jquery

setinterval

clearinterval