当页面/浏览器不在焦点时暂停setInterval

我有一个简单的幻灯片，我在客户端的主页上使用setInterval来定时旋转。当页面/浏览器不在焦点时暂停setInterval

防止浏览器搞砸了setInterval的页面时未聚焦（另一个选项卡被查看，或其他程序），我使用的是：

function onBlur() { 
      clearInterval(play); 
     }; 

     function onFocus() { 

      mySlideRotateFunction(); 

     }; 

     if (/*@[email protected]*/false) { 
      document.onfocusin = onFocus; 
      document.onfocusout = onBlur; 
     } else { 
      window.onfocus = onFocus; 
      window.onblur = onBlur; 
     }

凡mySlideRotateFunction设置的setInterval和运行一些jQuery。虽然这在大多数情况下都很有效，但我发现有时看起来好像onBlur没有运行，当我回到页面时，时序已经“建立起来了”，并且轮换变得疯狂。

我不能确定一个原因，为什么有时会发生这种情况，而不是其他人。

我的问题是我的代码存在问题，并且没有人有更好的建议来在浏览器窗口不在焦点时“暂停”setInterval？

感谢

来源

2011-09-20 Michael Watson

我遇到了同一个问题，因为前一段时间我正在做一个项目 - 我们试图修复那个恼人的“bug”..但最后我们使用了代码......因为我们可以当这种奇怪的行为发生时重现:( +1希望有人在那里与解决方案:) – walialu

尝试这样：

var myInterval; 
var interval_delay = 500; 
var is_interval_running = false; //Optional 

$(document).ready(function() { 
    $(window).focus(function() { 
     clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet 
     if (!is_interval_running) //Optional 
      myInterval = setInterval(interval_function, interval_delay); 
    }).blur(function() { 
     clearInterval(myInterval); // Clearing interval on window blur 
     is_interval_running = false; //Optional 
    }); 
}); 

interval_function = function() { 
    is_interval_running = true; //Optional 
    // Code running while window is in focus 
}

一些测试在IE9和FF6

做

来源

2011-09-20 15:12:17

所以基本上添加第二个clearInterval以防万一？看起来很明智，如果clearInterval确实错过了。我会稍微测试一下你的想法，看看它是否能解决这个问题。 –

@MichaelWatson添加了一些额外的代码，标记为“可选”。该代码可能会提供一些额外的安全性（至少它可能会阻止同时运行多个时间间隔） –

我喜欢它。让我给它一天左右的测试，我会告诉你，如果这个愚蠢的错误仍然偷偷溜过。 –

立即里面setInterval，放置一个检查，看是否该文档集中。间隔将像往常一样继续发射，但只有文档聚焦时才会执行内部代码。如果窗口模糊并随后重新对焦，则间隔将继续保持时间，但在此期间document.hasFocus()为false，所以在恢复焦点时，无需多次执行代码块即可“赶上”浏览器。

var timePerInterval = 7000; 
$(document).ready(function() { 
    setInterval(function(){ 
     if (document.hasFocus()) { 
      // code to be run every 7 seconds, but only when tab is focused 
     } 
    }, timePerInterval); 
});

来源

2016-06-06 23:36:55

当页面/浏览器不在焦点时暂停setInterval

回答

相关问题