談談javascript中的定時器

最近寫一些JS動畫，常用到JS中的定時器(setTimeout & set Interval)，尋找相關資料，有些心得與大家一起分享。

使用setTimeout & set Interval建立的定時器可以實現有趣且有用的功能，初學者可能對Javascript的定時器有誤解，認為它們是線程，其實Javascript是運行於單線程中的，而定時器僅僅是計劃在未來的某個時間執行，而具體的執行時間是不能保證的，因為在頁面的生命週期中，不同的時間可能有其它代碼在控制Javascript的裡進程。瀏覽器只是負責進行排序，指派某個代碼在某個時間點運行。

下面說下Javascript線程，表示javascript進程時間軸。

除了javascript執行進程外，還有一個需要在進程下一次空閑時間執行的代碼隊列，隨著頁面在其生命週期內的推移，代碼會按照執行順序添加到對列中，例如：當一個按鈕被按下時，它的事件處理就會添加到隊列中，並在下一個可能的時間內執行。

定時器對隊列的工作方式是，當特定的時間過去後，將代碼插入，注意添加到隊列並不意味著它會馬上執行，而只能說它會儘快執行，設定一個250ms後執行的定時器，不代表250ms後它會馬上執行，它只會表示在150ms後被加入到隊列中，如果這個時間點隊列是閒置，那麼這段代碼就會被執行。

請看以下代碼：

var btn = document.getElementById("mybtn");    btn.onclick = function () {        setTimeout(function () {            document.getElementById("message").nodeName = "mymessage";            //其它代碼        }, 250);    }

對於定時器最要注意的是：指定的時間間隔表示何時將定時器的代碼添加到隊列中，而不是何時執行代碼。關於這個onclick事伯處理的進程時間軸請看：

setTimeout() ：未來的某時執行代碼 ；clearTimeout() ：取消setTimeout()。

下面展示一個簡單的計時，並帶有停止功能：

<script type="text/javascript">    var c = 0    var t    function timedCount() {        document.getElementById('txt').value = c        c = c + 1        t = setTimeout("timedCount()", 1000)    }    function stopCount() {        clearTimeout(t)    }</script><input type="button" value="開始計時！" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="停止計時！" onClick="stopCount()">

 

setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算運算式。

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。

關於重複定時器，我們既可以使用setTimeout來重複建立就時器，也可以直接用setInterval，使用setInterval建立的定時器確保了定時器規則地插入隊列中，這個方式問題在於代碼可能在再次添加到隊列之前還沒有完成執行，可能尋到定時器重複運行好幾次，而中間沒有停頓，然而現在的javascript引擎很聰明，能避免這個問題，當使用setInterval時，僅當沒有定時器的任何其它代碼時，才將定時器代碼添加到隊列中，這樣會確保定時器代碼加入到隊列的時間的間隔是為指定的間隔，請注意這隻是排入佇列的時間間隔，並不是執行代碼的時間間隔，所以使用setInterval還是會存在兩個問題：（1）某些間隔會被跳過了（2）多個定時器的代碼執行間隔可能會比預期的要小。

為避免這些問題，可以使用如下模式使用鏈式setTimeout調用：

setTimeout(function () {        //處理中        setTimeout(arguments.callee, interval);    }, interval)

在上面的計時DEMO中也是使用此模式來做迴圈的。