關於setInterval你不得不知道的事

在平時開發過程當中，倒計時或輪詢是一個很常見的功能，當咱們須要一個倒計時功能時，咱們通常會優先想到setInterval。

以下：

function countDown(fn, wait, count) {
  let time = count || 5
  let interval = setInterval(() => {
    time--
    fn()
    if (time === 0) clearInterval(interval)
  }, wait)
}

let i = 0
countDown(() => {
  console.log(i++)
}, 1000)

複製代碼

但其實setInterval存在着一些弊端，將會在某些狀況下影響達到的效果。 一、setInterval無視網絡延遲，只要達到時間，就會進行下一次調用。假設咱們在請求一個http接口，在上一次還未返回結果的狀況下，繼續發起請求，頗有可能的結果就是一次性獲得屢次一樣的結果。當http接口都報錯的時候，可能同時出現屢次錯誤提示。或者屢次頁面刷新的情況。 二、假設每100豪秒執行一次，若上次執行只花了5ms，則下次執行會在95ms之後。時間並不許確。 三、即便setInterval調用的方法報錯了，他仍然會繼續執行。

因此推薦的作法是使用setTimeout在進行模擬setInterval。 經過setTimeout遞歸調用進行模擬：

(function loop(){
   setTimeout(function(){

      // logic here

      // recurse
      loop();

  }, 1000);
})();
複製代碼

博客地址 gitbook小冊