關於setInterval()你所不知道的地方

前言：1.使用setInterval()的定時器會把事件運行的時間也包含在內，如果要精確算定時兩個任務之間的時間，可以使用setTimeout()替換。2.當非同步事件發生時，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠 ...

前言：1.使用setInterval()的定時器會把事件運行的時間也包含在內，如果要精確算定時兩個任務之間的時間，可以使用setTimeout()替換。2.當非同步事件發生時，如mouse click, a timer firing, or an XMLHttpRequest completing（滑鼠點擊事件發生、定時器觸發事件發生、XMLHttpRequest完成回調觸發等），將他們放入執行隊列，等待當前代碼執行完成。

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的優勢主要有兩點：

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

文章內容收集與網路參考：http://www.jeffjade.com/2016/01/10/2016-01-10-javaScript-setInterval/