setinterval工作非常随机

setinterval working very randomly

本文关键字：随机 非常 工作 setinterval      更新时间：2023-09-26

嗨，

我有这个代码：

//<![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秒将类"new"添加到正文中，然后在10秒后再次将其删除，以开始进入一个无休止的循环。但它不会像预期的那样起作用。有时添加类需要超过10秒的时间，而且删除得太快。有些时候，它只做一次，然后循环就这样结束了。

这里怎么了？一个更有效和可靠的替代方案也将受到欢迎。

谢谢。

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

使用一个可切换的定时器：

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

至于启动需要很长时间，请记住，window load事件直到所有资源(包括您的所有图像等(完成下载后才会发生。因此，整个过程可能比你预期的要晚一点开始。

还要注意，浏览器越来越多地在非活动选项卡中"回拨"计时器，因此当计时器所在的窗口没有焦点时，计时器可能没有运行，或者可能不经常运行。

根据您的评论：

但这只是一种奖励。如果我想让课程持续20秒，但间隔时间保持在10秒，该怎么办？

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

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

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

相关文章：