倒计时为啥不准

先说原因：JavaScript是单线程，setTimeout （主线程空闲时才会去执行任务）的回调函数会被放入事件队列，既然要排队，就可能被前面的任务阻塞导致延迟 。且任务本身从call stack（执行栈）中拿出来执行也要耗时。所以有1000变1002也合理。就算setTimeout的第二个参数设为0，也会有至少有4ms的延迟。

let total = 9  // 倒计时9s
    let preStamp = Date.now();
    let nowStamp = preStamp;
    const countDown = ()=>{
        if(total > 0){
          preStamp = nowStamp
          nowStamp = Date.now();
          total--
          console.log('最后时间:',new Date().toLocaleString(),'总共耗时:', nowStamp - preStamp)
          setTimeout(countDown ,1000)
        }
      }
      countDown()

正常情况下，浏览器tab页是激活或者显示状态下：

image.png

有几毫秒的误差也正常，毕竟setTimeout是先把任务放到任务队列里，等主线程空闲时才会去执行。

但是有一种情况，就是tab页或者页面不显示或者隐藏时，倒计时函数的误差就会非常大：

image.png

原因：当页面处于后台时，浏览器会降低定时器的执行频率以节省资源，导致 setTimeout 的延迟增加。切回来后又正常了

解决办法

1. 监听 visibilitychange 事件，在切回tab时修正（不推荐）

let timer:any = null;
    let total = 20  // 倒计时9s
    let preStamp = Date.now();
    let nowStamp = preStamp;
    useEffect(() => {
        const handleVisibilityChange = () => {
          console.log('Page is visible:', document.visibilityState);
          if(document.visibilityState === 'visible'){
            preStamp = Date.now();
            nowStamp = preStamp;
            countDown()
          }else{
            timer && clearTimeout(timer)
          }
        };

        // 添加事件监听器
        document.addEventListener('visibilitychange', handleVisibilityChange);
        // 清理函数：移除事件监听器
        return () => {
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        };
    })
    const countDown = ()=>{
        if(total > 0){
          preStamp = nowStamp
          nowStamp = Date.now();
          total--
          nowStamp - preStamp && console.log('最后时间:',new Date().toLocaleString(),'总共耗时:', nowStamp - preStamp)
          timer = setTimeout(countDown ,1000)
        }
      }
      countDown()

当前代码是，tab隐藏的时候停掉倒计时，可以保证页面显示的时候倒计时还是每一秒执行一次（这种情况只能用来控制动画，如果是有特殊操作，就不能用这个方法了）。有的博主可能是在tab隐藏时调整倒计时的频次，就是setTimeout的第二个参数，但是我尝试了，不停掉计时器，倒计时会一直跑，而且，隐藏的tab页面时间越久，误差会越大，没有任何意思！

image.png

2. web worker（推荐）
   用web worker，单独的线程去计时，不会受切tab影响

//worker.ts
let total = 9;
let startTime = Date.now();
let preStamp = Date.now();
let nowStamp = preStamp;
const countDown = () => {
  const elapsed = Math.floor((Date.now() - startTime) / 1000);
  const remaining = total - elapsed;
  if (remaining > 0) {
    preStamp = nowStamp
    nowStamp = Date.now();
    postMessage({cutN: remaining, time: nowStamp - preStamp});
    setTimeout(countDown, 1000);
  } else {
    postMessage(0);
  }
};

countDown();

//index.ts
  const worker = new Worker(new URL('./worker.ts', import.meta.url));
    worker.onmessage = (e) => {
      console.log('剩余时间:', e.data.cutN, '当前时间:', new Date().toLocaleString(), e.data.time);
    };

tab页面隐藏后，倒计时正常执行，准确度也很好；

image.png

//文中有不对或者不严谨的地方谢谢这正，小的看见会立刻纠正改过，重新做人！！！