浏览器中跑定时器跑着跑着就慢了（离开当前页面，再次进来后时间会慢一点）...

最新推荐文章于 2024-04-16 17:45:19 发布

冰晨之露

最新推荐文章于 2024-04-16 17:45:19 发布

阅读量548

点赞数

本文链接：https://blog.youkuaiyun.com/lll19960406/article/details/131059548

版权

文章介绍了在开发考试系统时遇到的一个问题，即当考生离开浏览器页面时，定时器速度会变慢。原因是浏览器为了节省资源会调整页面时间。解决方案是通过监听文档的visibilitychange事件，在页面被隐藏时清除定时器，重新进入时启动定时器，从而保持计时的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近再写一个考试系统，到点交卷，在手机上跑定时器是没问题的，在浏览器上跑的时候，一离开页面(指切换标签页)，再次回来时间就会慢很多

关于浏览器变慢的原因是，当离开当前页面时，cpu检测到你不在当前页面，为了节省资源，会放慢浏览器的时间。导致进入页面，时间变慢。

有没有解决办法呢，当然是有的，如果我们可以监听进出页面，那么我们进入页面的时候，重启定时器，即修正时间，那么就不会有问题了

 document.addEventListener("visibilitychange", function() {
            if (document.hidden === true) {
                // 页面被挂起
                console.log('离开');
                clearInterval(that.timerll);
            } else {
                clearInterval(that.timerll);
                that.time()   
                console.log('进入');
            }
        });

使用以上代码，即可解决浏览器中定时器变慢的问题