18.2 高級定時器
使用 setTimeout() 和 setInterval() 創建的定時器可以用於實現有趣且有用的功能。雖然人們對 JavaScript 的定時器存在普遍的誤解，認爲它們是線程，其實 JavaScript 是運行於單線程的環境中的，而定時器僅僅只是計劃代碼在未來的某個時間執行。執行時機是不能保證的，因爲在頁面的生命週期中，不同時間可能有其他代碼在控制 JavaScript 進程。在頁面下載完後的代碼運行、事件處理程序、Ajax 回調函數都必須使用同樣的線程來執行。實際上，瀏覽器負責進行排序，指派某段代碼在某個時間點運行的優先級。
可以把 JavaScript 想象成在時間線上運行的。當頁面載入時，首先執行是任何包含在 <script /> 元素中的代碼，通常是頁面生命週期後面要用到的一些簡單的函數和變量的聲明，不過有時候也包含一些初始數據的處理。在這之後，JavaScript 進程將等待更多代碼執行。當進程空閒的時候，下一個代碼會被觸發並立刻執行。例如，當點擊某個按鈕時，onclick 事件處理程序會立刻執行，只要 JavaScript 進程處於空閒狀態。這樣一個頁面的時間線類似於圖 18-1 。
除了主 JavaScript 執行進程外，還有一個需要在進程下一次空閒時執行的代碼隊列。隨着頁面在其生命週期中的推移，代碼會按照執行順序添加入隊列。例如，當某個按鈕被按下時，它的事件處理程序代碼就會被添加到隊列中，並在下一個可能的時間裏執行。當接收到某個 Ajax 響應時，回調函數的代碼會被添加到隊列。在 JavaScript 中沒有任何代碼是立刻執行的，但一旦進程空閒則儘快執行。
定時器對隊列的工作方式是，當特定時間過去後將代碼插入。注意，給隊列添加代碼並不意味着對它立刻執行，而只能表示它會盡快執行。設定一個 150ms 後執行的定時器不代表到了 150ms 代碼就立刻執行，它表示代碼會在 150ms 後被加入到隊列中。如果在這個時間點上，隊列中沒有其他東西，那麼這段代碼就會被執行，表面上看上去好像代碼就在精確指定的時間點上執行了。其他情況下，代碼可能明顯地等待更長時間才執行。
請看以下代碼：
var btn = document.getElementById("my-btn");
btn.onclick = function(){
setTimeout(function(){
document.getElementById("message").style.visibility = "visible";
}, 250);
// 其他代碼
};
在這裏給一個按鈕設置了一個事件處理程序。事件處理器設置了一個 250ms 中調用的定時器。點擊該按鈕後，首先將 onclick 事件處理程序加入隊列。該程序執行後才設置定時器，再有 250ms 後，指定的代碼才被添加到隊列中等待執行。實際上，對 setTimeout() 的調用表示要晚點執行某些代碼。
關於定時器要記住的最重要的事情是，指定的時間間隔表示何時將定時器的代碼添加到隊列，而不是何時實際執行代碼。如果前面例子中的 onclick 事件處理程序執行了 300ms，那麼定時器的代碼至少要在定時器設置之後的 300ms 後纔會被執行。隊列中所有的代碼都要等到 JavaScript 進程空閒之後才能執行，而不管它們是如何添加到隊列中的。見圖 18-2
如圖 18-2 所示，儘管在 255ms 處添加了定時器代碼，但這時候還不能執行，因爲 onclick 事件處理程序仍在運行。定時器代碼最早能執行的時機是在 300ms 處，即 onclick 事件處理程序結束之後。
實際上 Firefox 中定時器的實現還能讓你確定定時器過了多久才執行，這需傳遞一個實際執行的時間與指定的間隔的差值。如下面的例子：
// 僅 Firefox 中
setTimeout(function(diff){
if (diff >0) {
// 晚調用
} else if (diff < 0) {
// 單調用
} else {
// 調用及時
}
}, 250);
執行完一套代碼後，JavaScript 進程返回一段很短的時間，這樣頁面上的其他處理就可以進行了。由於 JavaScript 進程會阻塞其他頁面處理，所以必須有這些小間隔來防止用戶界面被鎖定 (代碼長時間運行中還有可能出現)。這樣設置一個定時器，可以確保在定時器代碼執行前至少有一個進程間隔。
多數瀏覽器並不區分少於 10ms 的間隔。它們傾向於同等對待對間隔設置在 1ms~10ms 之間的任何定時器。Chrome 有一個非常精確的定時器機制，可以精確到 2ms 內。
18.2.1 重複的定時器
使用 setInterval() 創建的定時器確保了定時器代碼規則地插入隊列中。這個方式的問題在於，定時器代碼可能在代碼再次被添加到隊列之前還沒有完成執行，結果導致定時器代碼連續運行好幾次，而之間沒有任何停頓。幸好，JavaScript 引擎夠聰明，能避免這個問題。當使用 setInterval() 時，僅當沒有該定時器的任何其他代碼實例時，纔將定時器代碼添加到隊列中。這確保了定時器代碼加入到隊列中的最小時間間隔爲指定間隔。
這種重複定時器的規則有2點問題：(1)某些間隔會被跳過；(2)多個定時器的代碼執行之間的間隔可能會比預期的小。假設，某個 onclick 事件處理程序使用 setInterval() 設置了一個 200ms 間隔的重複定時器。如果事件處理程序花了 300ms 多一點時間完成，同時定時器代碼也花了差不多的時間，就會跳過一個間隔同時運行着的一個定時器代碼。參見圖 18-3 。
這個例子中的第 1 個定時器是在 205ms 處添加到隊列中的，但是直到過了 300ms 處才能夠執行。當執行這個定時器代碼時，在 405ms 處又給隊列添加了另外一個副本。在下一個間隔，即 605ms 處，第一個定時器代碼仍在運行，同時在隊列中已經有了一個定時器代碼的實例。結果是，在這個時間點上的定時器代碼不會被添加到隊列中。結果在 5ms 處添加的定時器代碼結束之後，405ms 處添加的定時器代碼就立刻執行。
=====爲了避免 setInterval()的重複定時器的這2個缺點，你可以用如下模式使用鏈式 setTimeout 調用：====
setTimeout(function(){
// 處理中
setTimeout(arguments.callee, interval);
}, interval);
這個模式鏈式調用了 setTimeout()，每次函數執行的時候都會創建一個新的定時器。第二個setTimeout()調用使用了 arguments.callee 來獲取對當前執行的函數的引用，併爲其設置另外一個定時器。這樣做的好處是，在前一個定時器代碼執行完之前，不會向隊列插入新的定時器代碼，確保不會有任何缺失的間隔。而且，它可以保證在下一次定時器代碼執行之前，至少要等待指定的間隔，避免了連續的運行。這個模式主要用於重複定時器，如下列所示：
setTimeout(function(){
var div = document.getElementById("myDiv");
var left = parseInt(div.style.left) + 5;
div.style.left = left + "px";
if (left < 200){
setTimeout(arguments.callee, 50);
}
}, 50);
這段定時器代碼每次執行的時候將一個 <div> 元素向右移動，當左座標在 200 像素的時候停止。JavaScript 動畫中使用這個模式很常見。
每個瀏覽器窗口、標籤頁、或者框架都有其各自的代碼執行隊列。這意味着，進行跨框架或者跨瀏覽器的定時調用，當代碼同時執行的時候可能會導致競爭條件。無論何時需要使用這種通信類型，最好是在接收框架或者窗口中創建一個定時器來執行代碼。
18.2.2 Yielding Processes
運行在瀏覽器中的 JavaScript 都被分配了一個確定數量的資源。不同於桌面應用往往能夠隨意控制他們要的內存大小和處理器時間，JavaScript 被嚴格限制了，以防止惡意的 Web 程序員把用戶的計算機搞掛了。其中一個限制是長時間運行腳本的制約，如果代碼運行超過特定的時間或者特定語句數量就不讓它繼續執行。如果代碼達到了這個限制，會彈出一個瀏覽器錯誤的對話框，告訴用戶某個腳本會用過長的時間執行，詢問是允許其繼續執行還是停止它。所有 JavaScript 開發人員的目標就是，確保用戶永遠不會在瀏覽器中看到這個令人費解的對話框。定時器是繞開此限制的方法之一。
腳本長時間運行的問題通常是由兩個原因之一造成的：過長的、過深嵌套的函數調用或者是進行大量處理的循環。這兩者中，後者是較爲容易解決的問題。長時間運行的循環通常遵循以下模式：
for(var i=0, len=data.length; i<len; i++){
process(data[i]);
}
這個模式的問題在於要處理的項目的數量在運行前是不可知的。如果完成 process() 要花 100ms ，只有2個項目的數組可能不會造成影響，但是 10 個數組可能會導致腳本要運行一秒鐘才能完成。數組中的項目數量直接關係到執行完該循環的時間長度。同時由於 JavaScript 的執行是一個阻塞操作，腳本運行所花時間越久，用戶無法與頁面交互的時間也越久。
在展開該循環之前，你需要回答以下兩個重要的問題。
- 該處理是否必須同步完成？如果這個數據的處理會造成其他運行的阻塞，那麼最好不要改動它。不過，如果你對這個問題的回答確定爲 “否” ，那麼將某些處理推遲到以後是個不錯的備選項。
- 數據是否必須按順序完成？通常，數組只是對項目的組合和迭代的一種簡便的方法而無所謂順序。如果項目的順序不是非常重要，那麼可能可以將某些處理推遲到以後。
18.2.3 函數節流
// 嘗試開始執行
processor.process();
在這段代碼中，創建了一個叫做 processor 的對象。這個對象還有2個方法：process() 和 performProcessing()。前者是初始化任何處理所必須調用的，後者則實際進行應完成的處理。當調用了 process()，第一步是清除存好的 timeoutId，來阻止之前的調用被執行。然後，創建一個新的定時器調用 performProcessing()。由於 setTimeout() 中用到的函數的環境總是 window ，所以有必要保存 this 的引用以方便以後使用。
時間間隔設爲了 100ms，這表示最後一次調用 process() 之後至少 100ms 後纔會調用 performProcessing()。所以如果 100ms 之內調用了 process() 共20次，performProcessing() 仍只會被調用一次。
這個模式可以使用 throttle() 函數來簡化，這個函數可以自動進行定時器的設置和清除，如下例所示：
function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 100);
}
throttle() 函數接受兩個參數：要執行的函數以及在哪個作用域中執行。上面這個函數首先清除之前設置的任何定時器。定時器 ID 是存儲在函數的 tId 屬性中的，第一次把方法傳遞給 throttle() 的時候，這個屬性可能並不存在。接下來，創建一個新的定時器，並將其 ID 存儲在方法的 tId 屬性中。如果這是第一次對這個方法調用 throttle() 的話，那麼這段代碼會創建該屬性。定時器代碼使用 call() 來確保方法在適當的環境中執行。如果沒有給出第二個參數，那麼就在全局作用域內執行該方法。
前面提到過，節流在 resize 事件中是最常用的。如果你基於該事件來改變頁面佈局的話，最好控制處理的頻率，以確保瀏覽器不會在極短的時間內進行過多的計算。例如，假設有一個 <div/> 元素需要保持它的高度始終等於寬度。那麼實現這一功能的 JavaScript 可以如下編寫：
window.onresize = function(){
var div = document.getElementById("myDiv");
div.style.height = div.offsetWidth + "px";
};
這段非常簡單的例子有兩個問題可能會造成瀏覽器運行緩慢。首先，要計算 offsetWidth 屬性，如果該元素或者頁面上其他元素有非常複雜的 CSS 樣式，那麼這個過程將會很複雜。其次，設置某個元素的高度需要對頁面進行迴流來令改動生效。如果頁面有很多元素同時應用了相當數量的 CSS 的話，這又需要很多計算。這就可以用到 throttle() 函數，如下例所示：
function resizeDiv(){
var div = document.getElementById("myDiv");
div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
throttle(resizeDiv);
};
這裏，調整大小的功能被放入了一個叫做 resizeDiv() 的單獨函數中。然後 onresize 事件處理程序調用 throttle() 並傳入 resizeDiv 函數，而不是直接調用 resizeDiv() 。多數情況下，用戶是感覺不到變化的，雖然給瀏覽器節省的計算可能會非常大。
只要代碼是週期性執行的，都應該使用節流，但是你不能控制請求執行的速率。這裏展示的 throttle() 函數用了 100ms 作爲間隔，你當然可以根據你的需要來修改它。
