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秒后将类"new"添加到正文中,然后再次在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处切换类,然后再次启动循环.根据需要调整.