JavaScript 計時器的工作原理

看下面內容之前，看一小段程式碼，如果讀者能說出程式碼的用意，那就沒必要往下看了，因為你都懂。

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);

計時器是一個很牛X的東西，但是很多人其實只限於知道它的語法，缺乏對其原理的認識。計時器透過設定一定的時間段（毫秒）來非同步的執行一段程式碼。因為 Javascript 是一個單線程語言，計時器提供了一種繞過這種語言限制來執行程式碼的能力。

今天就簡單的來說下計時器的工作原理。

JavaScript 提供了三個函數來建構和操作計時器

1 var id = setTimeout(fn, delay);

2 var id = setInterval(fn, delay);

3 clearIntervalout; id);

具體的文法我就不多說了，可以查手冊。為了了解計時器的工作原理，有一個概念必須記在心裡：時間延遲不能被保證。什麼意思，就是說你這樣寫setTimeout(fn, 500)並不代表fn肯定在500毫秒之後馬上就執行，延遲很可能會更長。因為JavaScript 是單執行緒語言，所有的非同步事件（包括計時器、滑鼠事件或一個XMLHttpRequest 完成）僅僅當程式執行期間​​有缺口的時候才會執行，不是你規定了什麼時候就什麼時候執行，要知道程序員不是萬能的，你寫的東西最後還是要看瀏覽器臉色的。

下面的這張圖片可以很好的說明問題，感謝 John Resig 大神。

從上往下看，左面的數字代表時間（毫秒），右面的文字代表了一系列非同步事件的設定和觸發，中間則是程式碼區塊。最上面的JavaScript 程式碼區塊可能是你在瀏覽器載入的時候執行的片段，大概耗時18毫秒，緊接著下面的Mouse Click Callback 程式碼區塊可能是你一個滑鼠事件觸發時的回呼函數，大概耗時11毫秒，依序類推。

JavaScript 的單線程特性決定了每次只能執行一塊，所以當第一塊程式碼執行的時候（它一共運行了18毫秒），本身構造了兩個計時器，期間可能用戶還點了一下滑鼠（你有過在網頁一打開還沒載完就在那亂點的情況嗎）。照理說用戶點完滑鼠就應該馬上執行那個回呼函數，但是不行，JavaScript 執行只有一條道嘛，在那18毫秒沒跑完之前，其他程式碼區塊想執行就只能排隊，沒空間給你超車都。那兩個計時器都是10毫秒的延遲，從圖中可以看到，setTimeout也在那18毫秒執行結束之前觸發了，沒辦法也排隊吧。

終於，18毫秒後，天上一道神雷把前面的車直接劈成空氣了，後面兩個排隊的可以過去了，但是還得一個一個，不能並列，那誰先過去呢？是不是兩個人在那劃拳？不是的，瀏覽器說的算，瀏覽器說，滑鼠點選事件先過去，setTimeout只能繼續等11毫秒。注意看圖，在滑鼠事件回呼函數執行的時候，又一個計時器事件觸發了（setInterval），等著，而且必須排在setTimeout的後面。

11毫秒過去了，setTimeout 終於可以過去了，注意看，setInterval 的第二次觸發了，雖然它第一次都在排隊呢，如果這個時候還嚮往常一樣排隊，最後是什麼情況，setTimeout執行完了，就會連續執行兩個setInterval，你設定的延遲沒用了都。所以瀏覽器還是比較聰明的，它在處理setInterval的時候，如果發現已經有排隊的，就直接把新來的 Kill 掉。

接著看，輪到排隊的setInterval 第一次觸發開始執行了，它執行的時候，第三次觸發又到了，這次沒有排隊了，所以瀏覽器沒把它Kill 掉，給丫排隊的機會，所以你會發現這兩次的setInterval的執行沒有間隔的，如果你做一個投影片，遇到這種情況就要好好想想自己的程式碼是不是有問題了。

最後，再也沒有別的因素幹擾了 setInterval 了（如果用戶被 MM 叫走了），setInterval 就按照你想要的步驟執行了。

講到這裡，開頭的程式碼可以理解了吧。

setTimeout(function(){
/* Some long block of code… */
setTimeout(arguments.callee, 10);
}, 10);
setInterval(function(){
/* Some long block of code… */
}, 10);

這兩個函數看起來效果一樣，其實不然，第一個程式碼區塊總是會延遲10毫秒執行，雖然大多時候是大於10毫秒的。而第二個每到10毫秒就嘗試執行，不管先前的觸發執行了沒有。

總結起來四條

• JavaScript 引擎只有一個線程，它會迫使某些非同步事件排隊

• setTimeout 和setInterval 在執行非同步程式碼的時候有很大區別

• 假如一個計時器被阻止執行，它會等待知道遇到一個程式碼執行空隙，通常時間比預期的要長

• Intervals 可能會一個挨著一個執行，如果回調函數的執行時間大於間隔