博客 / 詳情

返回

解決setInterval跟settimeout切換頁面後不準的問題

由於瀏覽器的優化機制,在切換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
    );
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.