解讀javascript的計時器 I

說明：這篇文章節錄自John Resig的《Secrets of the JavaScript Ninja》一書，本人翻譯只是供大家學習，翻譯不足之處，請斧正。

這篇文章主要從下面幾個方面來解讀計時器：

1. 計時器概述；
2. 計時器速度深度探析；
3. 用計時器處理大量任務；
4. 利用計時器管理動畫；
5. 較好的計時器測試

計時器是一個我們了解很少且經常被濫用的東西，它是javascript的特色。實際上，在複雜的應用程式開發中，它能為我們提供許多幫助。計時器提供了一個可以將程式碼片段非同步延時執行的能力，javascript生來是單線程的（在一定時間範圍內僅一部分js程式碼能運行），計時器為我們提供了一種避開這種限制的方法，從而開闢了另一條執行程式碼的蹊徑。

有趣的是，與我們普遍接受的觀點相反，計時器並不是javascript語言的一部分，而是瀏覽器引入的方法和物件的一部分。這意味著如果你選擇在一個非瀏覽器的環境中運行它，很有可能計時器不存在，你必須使用特定功能來推行你自己的版本（如Rhino線程）。

1、計時器是如何運作的

從根本上來說，理解計時器如何運作很重要。通常情況下，計時器的行為並不直觀，因為它在一個單獨的線程中，讓我們從三個函數的測試開始，對於每一個函數我們都有機會建立和控制計時器。

• var id = setTimeout(fn,delay)；啟動一個計時器，它將在延遲時間之後調用特定的函數，該函數返回一個唯一的ID，利用這個ID計時器在稍後的時間裡被取消；
• var id = setInterval(fn,delay)；與setTimeout相似，但它不斷的呼叫函數（每隔一定延遲時間）直到它被取消；
• clearInterval(id)，clearTimeout(id)；接受計時器的ID（由上述任一函數傳回）並停止呼叫計時器。

為了理解計時器內部是如何運作的，有一個很重要的概念需要加以探討：延遲是無法保證的。既然瀏覽器中所有javascript 是在一個單線程中運行的，那麼非同步事件（如滑鼠點擊、計時器）在執行中也只有存在開放狀態時才運行，下面這張土很好的說明了這個問題：

這張圖有很多資訊需要消化，充分理解它將使你對非同步js執行有一個更好的認識，圖表是一維的，在垂直方向上是時間（掛鐘），以毫秒為單位。藍色盒子代表代表js執行的比例。例如，第一個javascript區塊運行時間大約為18秒，滑鼠點擊大約為11秒等等。