页面未被查看时重复的功能

时间:2011-08-31 00:50:58

标签: javascript

我使用JavaScript创建了一个自重复功能,但是当我导航到浏览器中打开的另一个选项卡并返回包含该功能的选项卡时;该功能以比指定的更快的速度重复;任何人都可以解释为什么会发生这种情况?

使用的JavaScript示例:

function aFunction() {
    var aFunctionVar;
    clearTimeout(aFunctionVar);
    aFunctionVar = setTimeout(aFunction,8000);
    if (condition) {
        //More code to run...
        return false; 
    }
    if (condition) {
        //More code to run...
        return false; 
    } 
};
aFunction();

2 个答案:

答案 0 :(得分:3)

如果您的代码使用的是setInterval()并且您在Firefox或Chrome等浏览器中运行,那么这是因为这些浏览器在背景标签中放慢了定时器的速度(因此不会显示)。然后当你把它带回前台时,它试图抓住它们。有许多可能的解决方法。最好的办法是在浏览器窗口不再显示时停止计时器,并在再次显示窗口时重新启动计时器。

在Chromium博客上,Google表示:

  

在即将发布的Chrome 11版本中,我们计划减少CPU   即使对于使用setTimeout和setInterval的页面也要消耗。   对于后台选项卡,我们打算不再运行每个独立的计时器   而不是每秒一次。这一变化已在实施中实施   Chrome开发者频道和金丝雀版。

解决此问题的可能方法:

  • 窗口不可见时停止计时器/动画。当窗口变得可见时重新启动计时器。
  • 使用setTimeout代替setInterval,然后在每次触发时重置setTimeout以创建自己的重复间隔。
  • 减慢你的计时器,这样他们就不会碰到这个。

最好的选择可能是找出何时停止然后重新启动计时器。

类似的问题:Chrome:timeouts/interval suspended in background tabs

仅供参考,Chrome提供了用于检测网页可见性的新实验API。你可以在这里阅读:http://code.google.com/chrome/whitepapers/pagevisibility.html。当页面可见但没有焦点时,它有助于解决问题。

答案 1 :(得分:2)

请勿使用setInterval。使用函数末尾的setTimeout让它自己调用。通常,当另一个标签处于活动状态时,您的代码将不会在后台继续运行,但是setInterval一些浏览器会在您的标签再次激活后尝试“赶上”未接来电 - 这样可以更快地操作描述。另一种选择是通过在页面丢失并重新获得焦点时做出反应来实现自己的暂停。