你可能不知道的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的坑的地方，在實際編程中能夠少走點彎路。若是以爲有用的話，歡迎點個贊或者關注哦。謝謝。