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);
});//]]>

此代码应该添加类＆＃34; new＆＃34;在页面首次加载后10秒后再到主体，然后在10秒后再次移除它以开始进入无限循环。但它不会按预期工作。有时它需要超过10秒才能添加类，并且它会过早删除它。有时它只做一次然后循环结束就像那样。

这里有什么不对？我们也欢迎更有效和可靠的替代方案。

谢谢。

Answer 1

你告诉代码添加类每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处切换类，然后再次启动循环。根据需要进行调整。

setinterval非常随机地工作

1 个答案: