你所不知道的setInterval

在你所不知道的setTimeout記載了下setTimeout相關,此篇則整理了下setInterval；做爲擁有普遍應用場景(定時器，輪播圖，動畫效果，自動滾動等等)，而又充滿各類不肯定性的這setInterval，自當先洞悉它，才能很好的駕馭它。

如覺此處樣式排版不盡人意，可移步首鏈晚晴幽草軒~你所不知道的setInterval

1. setInterval()基礎

setInterval函數的用法與setTimeout徹底一致，區別僅僅在於setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。

<input type="button" onclick="clearInterval(timer)" value="stop">

<script>
  var i = 1
  var timer = setInterval(function() {
    console.log(2);
  }, 1000);
</script>

上面代碼表示每隔1000毫秒就輸出一個2，直到用戶點擊了中止按鈕。

與setTimeout同樣，除了前兩個參數，setInterval 方法還能夠接受更多的參數，它們會傳入回調函數，下面是一個例子。

function f(){
  for (var i=0;i<arguments.length;i++){
    console.log(arguments[i]);
  }
}

setInterval(f, 1000, "Hello World");
// Hello World
// Hello World
// Hello World
// ...

若是網頁不在瀏覽器的當前窗口（或tab），許多瀏覽器限制setInteral指定的反覆運行的任務最多每秒執行一次。

setInterval指定的是「開始執行」之間的間隔，並不考慮每次任務執行自己所消耗的事件。所以實際上，兩次執行之間的間隔會小於指定的時間。好比，setInterval指定每100ms執行一次，每次執行須要5ms，那麼第一次執行結束後95毫秒，第二次執行就會開始。若是某次執行耗時特別長，好比須要105毫秒，那麼它結束後，下一次執行就會當即開始。

var i = 1;
var timer = setInterval(function() {
  alert(i++);
}, 2000);

上面代碼每隔2000毫秒，就跳出一個alert對話框。若是用戶一直不點擊「肯定」，整個瀏覽器就處於「堵塞」狀態，後面的執行就一直沒法觸發，將會累積起來。舉例來講，第一次跳出alert對話框後，用戶過了6000毫秒才點擊「肯定」，那麼第二次、第三次、第四次執行將累積起來，它們之間不會再有等待間隔。

爲了確保兩次執行之間有固定的間隔，能夠不用setInterval，而是每次執行結束後，使用setTimeout指定下一次執行的具體時間。上面代碼用setTimeout，能夠改寫以下。

var i = 1;
var timer = setTimeout(function() {
  alert(i++);
  timer = setTimeout(arguments.callee, 2000);
}, 2000);

上面代碼能夠確保兩次執行的間隔是2000毫秒。

根據這種思路，能夠本身部署一個函數，實現間隔時間肯定的setInterval的效果。

function interval(func, wait){
  var interv = function(){
    func.call(null);
    setTimeout(interv, wait);
  };

  setTimeout(interv, wait);
}

interval(function(){
  console.log(2);
},1000);

上面代碼部署了一個interval函數，用循環調用setTimeout模擬了setInterval。

HTML 5標準規定，setInterval的最短間隔時間是10毫秒，也就是說，小於10毫秒的時間間隔會被調整到10毫秒。

2. setInterval運行機制

setInterval的運行機制是，將指定的代碼移出本次執行，等到下一輪Event Loop時，再檢查是否到了指定時間。若是到了，就執行對應的代碼；若是不到，就等到再下一輪Event Loop時從新判斷。這意味着，setTimeout指定的代碼，必須等到本次執行的全部代碼都執行完，纔會執行。

每一輪Event Loop時，都會將「任務隊列」中須要執行的任務，一次執行完。setTimeout和setInterval都是把任務添加到「任務隊列」的尾部。所以，它們實際上要等到當前腳本的全部同步任務執行完，而後再等到本次Event Loop的「任務隊列」的全部任務執行完，纔會開始執行。因爲前面的任務到底須要多少時間執行完，是不肯定的，因此沒有辦法保證，setTimeout和setInterval指定的任務，必定會按照預約時間執行。

這一點對於setInterval影響尤爲大。

setInterval(function(){
  console.log(2);
},1000);

(function (){
  sleeping(3000);
})();

上面的第一行語句要求每隔1000毫秒，就輸出一個2。可是，第二行語句須要3000毫秒才能完成，請問會發生什麼結果？

結果就是等到第二行語句運行完成之後，馬上連續輸出三個2，而後開始每隔1000毫秒，輸出一個2。也就是說，setIntervel具備累積效應，若是某個操做特別耗時，超過了setInterval的時間間隔，排在後面的操做會被累積起來，而後在很短的時間內連續觸發，這可能或形成性能問題（好比集中發出Ajax請求）。

爲了進一步理解JavaScript的單線程模型，請看下面這段僞代碼。

function init(){
  { 耗時5ms的某個操做 }
  觸發mouseClickEvent事件
  { 耗時5ms的某個操做 }
  setInterval(timerTask,10);
  { 耗時5ms的某個操做 }
}

function handleMouseClick(){
  耗時8ms的某個操做
}

function timerTask(){
  耗時2ms的某個操做
}
init();

請問調用init函數後，這段代碼的運行順序是怎樣的？

0-15ms：運行init函數。
15-23ms：運行handleMouseClick函數。請注意，這個函數是在5ms時觸發的，應該在那個時候就當即運行，可是因爲單線程的關係，必須等到init函數完成以後再運行。
23-25ms：運行timerTask函數。這個函數是在10ms時觸發的，規定每10ms運行一次，即在20ms、30ms、40ms等時候運行。因爲20ms時，JavaScript線程還有任務在運行，所以必須延遲到前面任務完成時再運行。
30-32ms：運行timerTask函數。
40-42ms：運行timerTask函數。

對於setInterval得使用，我的建議是能不用盡可能不用。涉及到必需要的定時器，前文已經敘述可使用兩個setTimeout嵌套組合來實現，而且還能規避掉一些問題得發生。涉及到要用它來製做動畫（ jQuery就使用setInterval來寫動畫，也是致使其慢緣由之一），更建議使用requestAnimationFrame(RAF)，或者直接採用CSS來寫（若是能夠的話）。

requestAnimationFrame比起setTimeout、setInterval的優點主要有兩點：

1. requestAnimationFrame會把每一幀中的全部DOM操做集中起來，在一次重繪或迴流中就完成，而且重繪或迴流的時間間隔牢牢跟隨瀏覽器的刷新頻率，通常來講，這個頻率爲每秒60幀。
2. 在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或迴流，這固然就意味着更少的的cpu，gpu和內存使用量。

參考文章連接：
阮一峯-javaScript標準參考教程

---

您可能會感興趣的文章：
你所不知道的setTimeout