javascript 当页面/浏览器失焦时暂停 setInterval
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7483525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pausing setInterval when page/ browser is out of focus
提问by Michael Watson
I have a simple slideshow that I've made on a client's homepage, using setInterval to time the rotations.
我在客户的主页上制作了一个简单的幻灯片，使用 setInterval 来计时。
To prevent browsers from screwing up setInterval when the page isn't in focus (another tab is being viewed, or another programme), I'm using:
为了防止浏览器在页面未聚焦（正在查看另一个选项卡或其他程序）时搞砸 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;
}
Where mySlideRotateFunction sets the setInterval and runs some jQuery. While this works the majority of the time, I find that, on occasion, it appears as though onBlur hasn't run, and when I return to the page the timings have 'built up' and the rotations go crazy.
其中 mySlideRotateFunction 设置 setInterval 并运行一些 jQuery。虽然这在大多数情况下都有效，但我发现有时似乎 onBlur 没有运行，当我返回页面时，时间已经“建立”并且旋转变得疯狂。
I can't quite determine a cause as to why this happens on occasion, and not on others.
我无法确定为什么偶尔会发生这种情况，而不是其他人。
My question- is there a problem with my code, and does anyone have a better suggestion for 'pausing' setInterval when browser window is out of focus?
我的问题 - 我的代码是否有问题，当浏览器窗口失焦时，是否有人有更好的“暂停” setInterval 建议？
Thanks
谢谢
采纳答案by Linus J?derlund
Try something like this:
尝试这样的事情：
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
}
Some testing done in IE9 and FF6
在 IE9 和 FF6 中完成的一些测试
回答by Jacob Ford
Immediately inside setInterval, place a check to see if the document is focused. The interval will continue firing as usual, but the code inside will only execute if the document is focused. If the window is blurred and later refocused, the interval will have continued keeping time but document.hasFocus()was falseduring that time, so there's no need for the browser to "catch up" by executing the code block a bunch of times when focus is restored.
立即在 内部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 );
});
