由于浏览器的优化机制,在切换tab之后浏览器会把setInterval跟settimeout的执行效率降低,在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。1000毫秒循环一次会变得越来越慢,3000,5000,甚至会停止循环,直到再次切回页面时激活,导致做一些商城活动倒计时之类功能时出现倒计时不准确等BUG。

  
1.可以通过监听 visibilitychange 来切出切回重新开启倒计时计算
    const visibilitychange = () => {
      document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'hidden') {
            console.log('页面离开')
        } else {
            console.log('页面回来')
        }
      });
    }
这种方式在倒计数区域会有个一闪而过的错误时间展示
2.开启JS多线程web weoker,倒计时写在weborker里时,页面的tab不会影响到倒计时的计算

    let webWorkDate = 100,
      date = 100;
    // 开启线程
    const work = new Worker('worker.js');
    setInterval(() => {
      date--;
      console.log('普通倒计数:', date);
    }, 1000);
    // 传输数据
    work.postMessage({ time: webWorkDate });
    console.log(work);
    
    // 监听线程
    work.onmessage = (event) => {
      console.log();
      console.log('Worker倒计数:', event.data.num);
      if (event.data.num === 0) {
        work.terminate(); //关闭线程
      }
    };
    //worker.js
    self.addEventListener(
      'message',
      function (e) {
        setInterval(() => {
          let num = e.data.time--;
          self.postMessage({ num });
        }, 1000);
      },
      false
    );

Victory
23 声望1 粉丝

专业CV战士