切换浏览器 tab 后,setInterval 变快了!?
追格官方小助手/
setInterval 速度变快的问题,偶有发生。比较典型的一个场景时,切换到其他浏览器tab待一会儿,再切换回来。
这个问题的根源在于javascript底层的单线程设计以及浏览器对性能优化的追求……
假如,A页面设计了一个 setInterval 每 2 秒执行一次,切换到B页面待10秒(这时浏览器会把A页面的线程停掉);再切换到A页面--A页面的setInterval 就积攒了 5 次未执行,这时候 setInterval 就会加速,把积攒的 5 次消化掉,然后再恢复正常的 2 秒一次。
知道了原因,就好解决了,在切换到其他页面时,把 serInterval 停掉,切换回来的时候,继续执行 serInterval 就可以了。
可以监听 document.onvisibilitychange 事件,然后在回调函数中检查 document.hidden 和 document.visibilityState,并作出相应操作就可以了。
document.onvisibilitychange = function () {
console.log("hidden" + ":" + document.hidden);
console.log("visibilityState" + ":" + document.visibilityState);
}
类似下面的代码就能解决问题:
var timer = undefined;
document.onvisibilitychange = function () {
if (document.visibilityState == "visible") {
timer = setInterval(slidemove, 1000);
} else {
clearInterval(timer);
}
}
暂无评论,抢个沙发...