setinterval 工作非常随机

Question

嗨，

我有这个代码：

//<![CDATA[
$(window).load(function(){
setInterval(function(){ 
   // toggle the class every 10 seconds
   $('body').addClass('new');  
   setTimeout(function(){
     // toggle back after 10 seconds
     $('body').removeClass('new');  
   },10000)
},10000);
});//]]>

此代码应该在页面首次加载后 10 秒后将 class "new" 添加到正文中，然后在 10 秒后再次将其删除以重新开始进入无限循环。但它不会按预期工作。有时添加 class 需要超过 10 秒的时间，并且它会很快将其删除。有时它只执行一次，然后循环就这样结束。

这里有什么问题吗？更有效和可靠的替代方案也将受到欢迎。

谢谢。

Answer 1

您已经告诉代码每 10 秒将 class 添加到运行。每 10 秒，您还安排一个计时器在 10 秒后删除 class。因此，从第 20 秒开始，你有一场比赛——第一个计时器会先到达那里，还是第二个？无论如何，它不会有你想要的结果。

使用一个定时器来切换：

setInterval(function() {
    $("body").toggleClass("new");
}, 10000);

至于需要很长时间才能启动，请记住 window load 事件在所有资源下载完成后才会发生，包括你所有的图像等等。所以整个过程可能比你预期的要晚很多。

另请注意，浏览器在非活动选项卡中的计时器越来越多 "dialing back"，因此当 window它在没有焦点。

来自您的评论：

But just as a bonus. What if I want to have the class to last 20 seconds but keep the interval in 10 seconds?

这使事情变得复杂。你可以有一个你切换的标志，并且只在标志处于一种状态或另一种状态时切换 class 。例如，类似于：

(function() { // Scoping function so the flag isn't a global
    var flag = true;
    setInterval(function() {
        if (flag) {
            $("body").toggleClass("new");
        }
        flag = !flag;
    }, 10000);
})();

这将在 10 秒添加 class，在 20 秒切换标志，在 30 秒移除 class，在 40 秒切换 class，然后再次开始循环。根据需要进行调整。

setinterval 工作非常随机

setinterval working very randomly

javascript

setinterval