【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 判断