切换浏览器 tab 后,setInterval 变快了!?

追格官方小助手/ 2023年03月21日/ JavaScript/ 浏览 2517

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);
    }
}


发表评论

暂无评论,抢个沙发...

客服 工单