【JS】浏览器切换标签页导致计时器不准
现有一段计时器代码
function count() {
let n = 0
const timer = setInterval(() => {
console.log(n);
if (n >= 200) {
clearInterval(timer)
}
n++
}, 10)
}
count()
效果如下，当计时过程中切换标签页，定时器的时间会放缓，再次切回标签页后，正常计时。
这是浏览器的一种机制，当标签页不可见时，仍然频繁的计时会影响效率，会自动将计时器的时间间隔拉长到1秒钟。
如果这个机制会影响到功能，如动画暂停、计时器暂停、视频暂停等，可以使用浏览器的Page Visibility API，判断当前标签页是否可见，在不可见时暂停某些功能。
通过 document.hidden 判断当前标签页是否可见
document.addEventListener('visibilitychange', () => {
console.log(document.hidden);
}, false);
也可以使用 document.visibilityState 判断
原文地址：https://blog.csdn.net/owo_ovo/article/details/142816412
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！