你可能不知道的setInterval的坑

你可能不知道的setInterval的坑

之前印象中一直記得setInterval有一些坑，但是一直不是很清楚那些坑是什么。今天去摸索了下之后，決定來做個記錄以免自己忘記，也希望讓更多人了解到這個坑。

坑的地方

1. setInterval會無視代碼的錯誤。就算遇到了錯誤，它還是會一直循環下去，不會停止。這就導致了可能你代碼里存在着一些問題（比如你的代碼可能有個一定概率下會發生的錯誤，而你使用setinterval來循環調用它，由於setinterval不會因為報錯停止，所以這個問題可能被隱藏），可是卻很難發現。

   let count = 1;
   setInterval(function () {
       count++;
       console.log(count);
       if (count % 3 === 0) throw new Error('setInterval報錯');
   }, 1000)
   

2. setInterval會無視任何情況下定時執行。而在有些場景下，我們是不希望如此的。

   比如說，我們要實現一個功能，每隔一段時間要向服務器發送請求來查看是否有新數據。此時，若當時用戶的網絡狀態很糟糕，客戶端收到請求響應的時間大於interval循環的時間。而setInterval會無視任何情況下定時執行，這就會導致了用戶的客戶端里充斥着ajax請求。
   此時正確的做法應該是改用setTimeout,當用戶發出去的請求得到響應或者超時后，再使用setTimeout遞歸發送下一個請求。這樣就不會有setInterval的坑了。

3. setInterval不能確保每次調用都能執行。我們可以先看一個代碼

   const startDate = new Date();
   let endData;
   // 第一個調用會被略過
   setInterval(() => {
     console.log('start');
     console.log(startDate.getTime());
     console.log(endDate.getTime());
     console.log('end');
   }, 1000);
   while (startDate.getTime() + 2 * 1000 > (new Date()).getTime()) {
   }
   endDate = new Date();
   

   我們可以看到，第一次執行的setInterval函數輸出的startDate和endDate差距在2s以上。而我們的setInterval寫的是每間隔1s執行一次。因此，我們可以看出，第一次的setInterval函數調用被略過了。

   這說明了：如果說你的代碼執行時間會比較久的話，就會導致setInterval中的一部分函數調用被略過。因此你的程序如果依賴於setInterval的精確執行的話，那么你就要小心這一點了。

   當然，其實setTimeout也有這個問題。瀏覽器的定時器都不是精確執行的。就算你調用setTimeout(fn, 0)，它也不能確保馬上執行。

解決方案

其實解決方案也很簡單，就是使用setTimeout，然后再setTimeout里遞歸調用。

比如說第一個和第二個坑就可以這樣寫：

function fn () {
  setTimeout(() => {
    // 程序主邏輯代碼
    // 循環遞歸調用
    fn();
  }, 1000);
}
fn();

可是使用setTimeout后，我們又可能會遇到一個問題，就是計時器的下次觸發時間是在當前的觸發時間上開始計算的。這對於第二個坑這種情況是合理的，可是有時候我們又希望它能“勻速”地被觸發。也就是說，希望計時器的觸發時間盡可能在計時器注冊時間+周期*delay附近。這個時候，我們就可以用預期下次發生的時間減去當前的時間來得到一個精確的delayTime。

我寫了一個簡單的函數來實現這一點：一開始調用該函數的時候，會記錄當前的計時器注冊時間，以及一個用來統計計算器調用次數的變量。之后在每次調用newFn的時候，都會使用預期下次發生的時間減去當前的時間來得到一個精確的delayTime。這樣至少可以保證在一些情況下，計時器可以稍微精確的執行。

function accurateTimers (fn, expectDelayTime) {
  let init = false;
  let registDate = new Date(); // 計時器注冊時間
  let count = 0;  // 計時器調用次數
  function newFn() {
    let delayTime;
    count++;
    if (!init) {
      init = true;
      delayTime = expectDelayTime;
    } else {
      delayTime = expectDelayTime * count + registDate.getTime() - new Date().getTime();
    }
    console.log(delayTime);
    setTimeout(() => {
      fn();
      newFn();
    }, delayTime);
  }
  newFn();
}
accurateTimers(function () {
  let startDate = new Date();
  // 延遲500ms
  while (startDate.getTime() + 500 > (new Date()).getTime()) {
  }
}, 1000);

結論

以上，就是本次文章的內容。這篇文章只是做一個簡單的記錄，希望能幫大家了解到setInterval的坑的地方，在實際編程中可以少走點彎路。如果覺得有用的話，歡迎點個贊或者關注哦。謝謝。