我有一段代码:
var logo = $("#blinking-logo");
function logo_blink() {
logo.fadeOut(10).delay(10)
.fadeIn(10).delay(20)
.fadeOut(10).delay(10)
.fadeIn(10)
window.setTimeout(logo_blink, (Math.random()*(1500))+1500);
}
logo_blink();
它所做的只是每 30 秒闪烁一次图片(此处时间较短,以便于调试)
Chrome 在标签处于后台时暂停此计时器的问题,然后,当返回到该标签时,它会闪烁后台中错过的所有闪烁。
我想在后台暂停计时器,但我不知道如何操作。我读过一些相关的帖子,但似乎它们描述了相反的问题。有什么方法可以检测选项卡的背景吗?
这是一个众所周知的功能。为了节省资源,Chrome 不会更新没有焦点的窗口:) 例如,您可以检查该窗口是否失去焦点并停止计时器。当窗口处于焦点状态时再次启动它。例如:
var timer = null;
var logo = $("#blinking-logo");
function logo_blink() {
if(timer) clearTimeout('timer');
logo.fadeOut(10).delay(10)
.fadeIn(10).delay(20)
.fadeOut(10).delay(10)
.fadeIn(10)
timer = window.setTimeout(logo_blink, (Math.random()*(1500))+1500);
}
logo_blink();
$(window).blur(function(){clearTimeout(timer); timer = null;});
$(window).focus(function(){if (!timer) timer = window.setTimeout(logo_blink, (Math.random()*(1500))+1500);});
像这样的东西。在我的一个带有动画的页面上,setInterval 也有同样的问题,所以我只是在页面处于后台时暂停它。
if (!$.browser.msie)
{
$(window).focus(function(){paused = false;});
$(window).blur(function(){paused = true;});
}
并根据暂停标志的值跳过动画。
ps:代码已更新,并进行了下面讨论的优化。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)