setTimeout,setInterval 谷歌内核浏览器切换标签(非激活状态)时,限制速度

setTimeout,setInterval 谷歌内核浏览器切换标签(非激活状态)时,限制速度

    最近做开发,开发一个客服呼叫系统. 遇见一个很小的需求。客服端有一个电话监听事件,如果有电话打进来,把浏览器title滚动播放。

    刚听完这个需求,对于一个老程序来说这也太简单了。随便百度个类似插件,集成上去不就ok了吗。

    然后就找到了个叫Title.js的轮播插件。可以轮播,可以修改,可以加前后缀。代码如下:

    源码地址:https://github.com/arkaindas/titlejs

/**********************
titleJs v1.0 | (c) 2014 | Author: Arkaprava Majumder | Author Uri: http://arkapravamajumder.com 
**********************/
var timer;
var Title = {
   vars: {
   	sourceTitle: document.title,
   	counter: 0,
	timer1:''
   },
   typeWriter: function(){
	document.title=this.vars.sourceTitle.substring(0,this.vars.counter);
	if(this.vars.counter==this.vars.sourceTitle.length)
	{
		this.vars.counter=0;
		timer = setTimeout("Title.typeWriter()",50);
	} else {
		this.vars.counter++;
		timer = setTimeout("Title.typeWriter()",50);
	}
   },
   marquee: function(){
   	document.title = this.vars.sourceTitle.substring(this.vars.counter, this.vars.sourceTitle.length)+" "+this.vars.sourceTitle.substring(0,this.vars.counter);
	this.vars.counter++;
	    if (this.vars.counter > this.vars.sourceTitle.length)
	    {
		this.vars.counter = 0;
	    }
	timer = setTimeout("Title.marquee()", 50);
   },
   pref: function(param){
   	if(param.trim()!=""){
	   this.vars.sourceTitle=document.title=param+" "+this.vars.sourceTitle;
	}
   },
   suf: function(param){
  	if(param.trim()!=""){
	   this.vars.sourceTitle=document.title=this.vars.sourceTitle+" "+param;
	}
	   
   },
   change: function(param){
   	if(param.trim()!=""){
	   	this.vars.sourceTitle=document.title=param;
	}
   },
   animation: function(param){
		switch(param){
			case "typeWriter":
				this.typeWriter();
			break;
			case "marquee":
				this.marquee();
			break;	
		}
   }

};

      然后,对插件代码做了少许处理,来方便关闭轮播效果。

image.png

   然后直接引入,调用。ok,完工了吧?

Title.animation("typeWriter");

   可万万没想到,在chrome上,如果页面标签非活动状态,那么运行非常缓慢,不管怎么改定时器的时间间隔。这样的话,就达不到清晰提示的目的,简直就是鸡肋。

   so。。。where is the matter?

   查百度,竟然几乎没有人问这个问题。然后就可是一通乱翻,不经意间,发现一个插件.简介只有一句话:Avoid timers throttling by browser when tab is inactive。

    一句话就够了,要的就是这个。引入到项目试了下,完全符合预期。


    查资料,貌似是谷歌chrome为了性能,自动判断当前页签是否是活动状态,如果不是的话,settimeout最快也是每秒执行一次,不管参数是多小。而在IE浏览器是不会出现这个情况的(懒得测试FF)。

    

    本来觉得一个很简单的需求,结果坑了自己将近2个小时。一入IT深似海。。。



回复列表



回复操作






   

发布时间:2019-04-04 17:35:32

修改时间:2019-04-04 17:36:08

查看次数:117

评论次数:0

TA的文章总数

92