Javascript 页面/浏览器失焦时暂停设置间隔
我在客户的主页上做了一个简单的幻灯片,使用setInterval来计时旋转 为了防止浏览器在页面未聚焦时(正在查看另一个选项卡或另一个程序)破坏设置间隔,我使用:Javascript 页面/浏览器失焦时暂停设置间隔,javascript,jquery,setinterval,onblur,Javascript,Jquery,Setinterval,Onblur,我在客户的主页上做了一个简单的幻灯片,使用setInterval来计时旋转 为了防止浏览器在页面未聚焦时(正在查看另一个选项卡或另一个程序)破坏设置间隔,我使用: function onBlur() { clearInterval(play); }; function onFocus() { mySlideRotateFunction(); }; if (/*@cc_on!@*
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有更好的建议
谢谢试试这样的方法:
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中进行的一些测试立即在
setInterval
内进行,检查文档是否聚焦。间隔将像往常一样继续触发,但仅当文档被聚焦时,内部代码才会执行。如果窗口模糊且随后重新聚焦,则间隔将持续保持时间,但在此期间document.hasFocus()
wasfalse
,因此浏览器无需在焦点恢复时多次执行代码块来“追赶”
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 );
});
不久前,我在一个项目中遇到了同样的问题——我们试图修复那个恼人的“bug”。。但最终我们还是照样使用了代码。。因为当这种奇怪的行为发生时,我们无法复制:(+1,希望有人有解决方案:)所以基本上添加第二个clearInterval以防万一?如果确实错过了clearInterval,这似乎是明智的。我会测试一下你的想法,看看它是否解决了这个错误。@MichaelWatson添加了一些额外的代码,并将其标记为“可选”。这段代码可能会提供一些额外的安全性(至少可以防止同时运行多个间隔),我喜欢它。让我给它一天左右的测试,我会让你知道,如果愚蠢的错误仍然通过。嘿,莱纳斯-我可以确认,它的工作!没有明显的过度测试,但在ie7+、chrome、safari和firefox上似乎很棒。@JacobFord您可能需要在init上设置间隔,在blue上清除它,然后在focus上再次设置间隔。如果窗口已经处于焦点位置,则不会猜测“焦点”,然后加载页面。很抱歉回答晚了!