你所不知道的setInterval

在 你所不知道的setTimeout 記載了下 setTimeout 相關,此篇則整理了下 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函數后，這段代碼的運行順序是怎樣的？

對于setInterval得使用，個人建議是能不用盡量不用。涉及到必須要的定時器，前文已經敘述可以使用兩個setTimeout嵌套組合來實現，并且還能規避掉一些問題得發生。涉及到要用它來制作動畫（ jQuery就使用setInterval來寫動畫，也是導致其慢原因之一），更建議使用 requestAnimationFrame (RAF)，或者直接采用CSS來寫（如果可以的話）。

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

1. requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。
2. 在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的的cpu，gpu和內存使用量。