页面/浏览器失焦时暂停setInterval

我有一个简单的幻灯片，我在客户的主页上制作，使用setInterval为旋转计时。

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

function onBlur() { clearInterval(play); }; function onFocus() { mySlideRotateFunction(); }; if (/*@cc_on!@*/false) { document.onfocusin = onFocus; document.onfocusout = onBlur; } else { window.onfocus = onFocus; window.onblur = onBlur; } 

mySlideRotateFunction设置setInterval并运行一些jQuery。 虽然这在大多数情况下是有效的，但我发现，有时看起来似乎onBlur还没有运行，当我回到页面时，时间已经“积累”并且旋转变得疯狂。

我无法确定为什么有时会发生这种情况的原因，而不是其他原因。

我的问题 – 我的代码存在问题，当浏览器窗口失焦时，是否有人更好地建议“暂停”setInterval？

谢谢

Answer 1

尝试这样的事情：

 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中完成了一些测试

Answer 2

紧接在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 ); });