来自另一个选项卡的Jquery setInterval太快了

Question

我有一个站点，它使用jquery的setIntervall()函数不断地滑动图像。

当调用Chrome 13中的页面时，我切换到另一个选项卡，以便几秒钟后返回，图像滑动发生得更快，就好像它试图保持原来的状态，如果没有切换到另一个选项卡的话。

我怎样才能解决这个问题？

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").animate({left: -1 * offset}, 1000);
}

Answer 1

一开始，我想为所有的错误道歉--我的英语并不完美。

解决问题的方法可能非常简单：

$(window).load(function() { 
    setInterval(nextSlide, 3500);
});

function nextSlide(){   
    offset += delta;
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);
}

非活动浏览器选项卡缓冲一些setInterval或setTimeout函数。停止(真，真)-将停止所有缓冲事件，并只执行最后一个动画。此问题也将出现在Firefox > 5.0中--请阅读本文：Firefox 5-更改

window.setTimeout()方法现在限制在非活动选项卡中每秒发送不超过一个超时。此外，它现在将嵌套超时限制在HTML5规范允许的最小值:4ms(而不是原来的10 ms )。

在这里你可以读到，动画是如何工作的-它多次激发setInterval函数。动画在jQuery中的真正工作方式

Answer 2

最新版本的Chrome显然减慢了setInterval的运行速度，当一个选项卡式页面出现在后台时，当你将页面向前移动时，它就会试图赶上它。

在Chromium博客上，谷歌表示：

在即将发布的Chrome 11中，我们计划降低CPU消耗，即使是使用setTimeout和setInterval的页面也是如此。对于背景选项卡，我们打算每秒钟运行一次以上的独立计时器。这一更改已经在Chrome通道和金丝雀构建中实现。

您的间隔是3.5秒，但动画本身可能使用更短的计时器。

解决这一问题的可能方法：

• 当窗口不可见时，停止计时器/动画。当窗口可见时重新启动计时器/动画。
• 不要使用setInterval，而是使用setTimeout，然后在每次触发setTimeout以创建自己的重复间隔时重置它--尽管在您的例子中，问题可能是jQuery对计时器的使用--我不知道。
• 放慢定时器的速度，这样它们就不会与此发生冲突(同样可能在jQuery内部，而不是您自己的计时器中)。

最好的选择可能是找出什么时候停止，然后重新启动动画。

这里有类似的问题：Chrome:暂停/间隔挂在后台选项卡上？。

FYI，Chrome有新的试验性API来检测页面的可见度正是出于这个原因。你可以在这里读到：http://code.google.com/chrome/whitepapers/pagevisibility.html。当页面可见时，它可以帮助解决问题，但是没有焦点。

Answer 3

您是否尝试过完全不使用setInterval或setTimeout，而只是使用animate函数的complete函数来启动下一张幻灯片？delay函数被设置为2500 (即从setInterval的3500减去动画的1000 )。我还没有在Chrome上试过这个，所以请告诉我它是否有效。

var slider = function(n){
    $("#slideContent").delay(2500).animate({left: -1 * n * delta},
                                           1000,
                                           function(){slider(n+1)}
                                          );
};
slider(1);