Javascript setinterval工作非常随意

嗨

我有以下代码：

//<![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”添加到body中，然后在10秒后再次将其删除，以进入一个无休止的循环。但它不会像预期的那样工作。有时，添加类所需的时间超过10秒，而删除类的时间过快。有时它只做一次，然后循环就这样结束了

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

---

谢谢。

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

使用单个定时器切换：

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

至于启动需要很长时间，请记住，

窗口

加载

事件只有在所有资源（包括您的所有图像等）下载完毕后才会发生。因此，整个过程的开始可能比您预期的要晚一些

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

---

根据您的评论：

但是作为奖励。如果我想让课程持续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秒时切换类，然后再次开始循环。根据需要进行调整。

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

使用单个定时器切换：

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

至于启动需要很长时间，请记住，

窗口

加载

事件只有在所有资源（包括您的所有图像等）下载完毕后才会发生。因此，整个过程的开始可能比您预期的要晚一些

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

---

根据您的评论：

但是作为奖励。如果我想让课程持续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秒时切换类，然后再次开始循环。根据需要进行调整。

您可能需要为您的问题添加jQuery标签，因为您正在使用jQuery插件。@NewToJS文章的重点不是jQuery。@MaxArt OP正在使用jQuery，标签用于显示相关搜索。我没有说这是问题的重点，但这与使用正确的标记有关，而这篇文章缺少一个标记。由于您使用的是jQuery插件，所以您可能希望将jQuery标记到您的问题上。@NewToJS这篇文章的重点不是jQuery。@MaxArt OP使用的是jQuery，标记用于显示相关的搜索。我没有说这是问题的重点，但使用正确的标签是相关的，这篇文章缺少一个。谢谢。这就成功了。但是作为奖励。如果我想让课程持续20秒，但将间隔保持在10秒，那该怎么办？@CainNuke:我已经添加到上面的结尾。谢谢。这就成功了。但是作为奖励。如果我想让课程持续20秒，但将间隔保持在10秒，那该怎么办？@CainNuke:我已经添加到上面的结尾。