浏览器切换标签/隐藏 – js定时器会变缓慢Bug解决办法

作者：管理员 2017-05-03 13:33:35 分类：JavaScript 阅读（19919） 0

问题摘要

首先说说这个问题具体是个什么情况，最近我在进行博客改版，然后我发现一件十分诡异的事，网站头部公告（上下滚动）轮播在当前打开页面是正常的，但是，一旦博客窗口被隐藏（离开视线），然后重新切换到我博客再看的时候发现公告文字轮播疯狂执行，后来经过一番探究证实是因为-浏览器切换标签js定时器会变缓慢，当重新切换到当前窗口之前变慢的定时器堆积在一起便开始疯狂执行。这个问题在什么情况下发生我也不清楚，因为上个博客版本也是这段代码，但并没出现这个问题

问题解决方案

查了不少资料，最终发现这个问题其实我们经常遇到过，只是平时没在浏览器切换窗口才发生，所以一时毫无头绪。

方案1：如果您使用的是jQuery，在jq版本里每次在animate前加上 $(obj).stop(true,true); 可以解决

1
2
3
4
5
6
7
8
9

//首页公告开始
setInterval(function(){
$(".notice").show();
$(".notice ul").stop(true,true).animate({"top":"-20px"},function(){
var node = $(".notice ul li:eq(0)").remove();
$(".notice ul").append(node);
$(".notice ul").css("top","0");
});
},3500);

方案2：通过浏览器的焦点去执行该js（我也是才知道window窗口也是有焦点事件的）

1
2
3
4
5
6
7
8

var timer=null;
window .onfocus=function(){
timer=setInterval(autoRun,1000);
}

window.onblur=function(){
clearInterval(timer);
}

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(11) 打赏

标签：

Js定时器Bug

上一篇：酷我音乐 – 教你快速制作生成.mp3文件音乐外链

下一篇：GitHub互赞、互Star、刷赞平台 – GitStar快速提升项目人气

浏览器切换标签/隐藏 – js定时器会变缓慢Bug解决办法

问题摘要

问题解决方案

相关推荐

共 0 条评论关于"浏览器切换标签/隐藏 – js定时器会变缓慢Bug解决办法"

点击取消