现有一段计时器代码

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

function count() {
  let n = 0;
  let timer = null;

  const startTimer = () => {
    timer = setInterval(() => {
      console.log(n);
      if (n >= 200) {
        clearInterval(timer);
      }
      n++;
    }, 10);
  };

  const stopTimer = () => {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  };

  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      stopTimer(); // 页面不可见时暂停定时器
    } else {
      startTimer(); // 页面重新可见时重启定时器
    }
  }, false);

  startTimer(); // 初始化时开始计时器
}