失活页面的计时器问题

问题描述:页面设置了定时器,切换其他页面,过一段时间过来,定时器动画出现定位错误,重叠等问题

原因:chrome浏览器会对长时间处于静止状态的标签页的定时器进行节流,会把定时器间隔调整为不低于1s,有的浏览器会改为十几分钟.再Edge和Firefox不会.

解决方法:判断该标签页是否处于隐藏显示状态,隐藏时停止计时器动画,显示时继续动画;如果想在页签隐藏时,计时器不受浏览器影响,可以使用webWorker创建一个新的线程,把定时器放到webWorker里面,new Worker()

document.addEventListener('visibilitychange',function(){
    if(document.visibilityState === 'hidden'){
	      // 标签页处于隐藏状态
	}
})