当前位置:秋叶网络博客 前端编程 ◊ setInterval在切换浏览器标签页时的bug修复

setInterval在切换浏览器标签页时的bug修复

作者:秋叶 发表时间:2016年3月17日

网页上做动画的时候,常常会碰到我去浏览其他页面再切换回来浏览动画页面的时候,发现动画变得迟钝了,才1秒没看,就变得懒洋洋的。

解决办法其实很简单,用两个窗口的事件window.onfocus和window.onblur分别对应窗口聚焦的时候和离开窗口的触发事件。在窗口聚焦时开启定时器,离开时关闭定时器,也省资源。而且还不会出现迟钝的现象:

var timer = setInterval(process);
window.onfocus=function(){
	timer=setInterval(process);
}
window.onblur=function(){
	clearInterval(timer);
}

这是原生js的解决办法,对于jq封装的动画方法animate可以在其前面加上stop得以解决:

$(obj).stop().animate({"left":"100px"});

这样的话无论你隔多久回来看,动画都是流畅的。

目录: 前端编程 | 标签: | 5238次阅读