掌握定時器工作原理必知：JavaScript引擎是單執行緒執行的,瀏覽器無論在什麼時候都只且只有一個執行緒在執行JavaScript程式. 常言道：setTimeout和setInterval是偽執行緒。

　　Javascript是執行在單執行緒環境中的，在頁面的宣告週期中，不同時間可能有其他程式碼在控制Javascript程序，比如：包含在<script>元素中的程式碼、dom元素的事件處理程式、Ajax的回撥函式。定時器僅僅是在未來的某個時刻將程式碼新增到程式碼佇列中，執行時機是不能保證的。程式碼佇列按照先進先出的原則在主程序空閒後將佇列中的程式碼交給主執行緒執行。

　　在不同時間段內Javascript主程序處於不同狀態，開始時執行頁面中<script>元素內的程式碼，初始載入完成後，主程序進入空閒狀態，這時候有dom元素產生click事件，事件處理程式碼被新增到程式碼佇列中，程式碼佇列發現Javascript主程序處於空閒狀態，立即將佇列中的第一個元素交給主程序執行。上圖便是這一個過程的時間線。

　　在Javascript中沒有任何程式碼是立刻執行的，帶一旦程序空閒則儘快執行。例如，當某個按鈕被按下時，事件處理函式會被新增到程式碼佇列中。當接收到ajax響應時，回校函式的程式碼被新增到佇列中。而定時器對佇列的工作方式是，當特定的事件過去後將程式碼加入到佇列中。

var ele = document.getElementById('btn');
ele.onclick = function(){
    setTimeout(function(){
        document.getElementById(message).style.backgroundColor 
 
= "red";
    }, 255);
    var start = Date.now();
    while(Date.now() - start < 300) {};
}

　　以上示例中，定時器在255ms事被插入到程式碼佇列中，但Javascript主執行緒有300ms處於執行狀態，那麼定時器程式碼至少要在定時器設定之後的300ms後才會被執行。以下時間線代表了上面程式碼的執行過程。

　　重複定時器setInterval

　　為了確保定時器程式碼插入到佇列總的最小間隔為指定時間。當使用setInterval()時，僅當沒有該定時器的任何其他程式碼例項時，才能將定時器程式碼新增到程式碼佇列中。假設沒有這條原則，setInterval()建立的定時器確保了定時器程式碼能夠規則的插入佇列中。那麼問題來了，假設Javascript主程序的執行時間非常長，那麼setInterval的程式碼被多次新增到了程式碼佇列中，等到主程序空閒時，定時器程式碼便會連續執行多次而之間不會有任何停頓。

　　但是這條規則同樣也帶來了兩個問題：

1. 某些間隔會被跳過
2. 多個定時器的程式碼執行之間的間隔可能會比預期的小

var ele = document.getElementById('btn');
ele.onclick = function(){
    setInterval(function(){
　　　　console.log('run interval');
        var start = Date.now();
        while(Date.now() - start < 350) {};
    }, 200);
    var start = Date.now();
    while(Date.now() - start < 300) {};
}

　　以上程式碼中，click事件處理程式中通過setInterval設定了一個200ms的時間間隔的重複定時器。從以上程式碼可以看出事件處理程式花了300ms多的時間完成，而定時器程式碼也花了300ms的時間，這個時候就會出現跳過間隔且連續兩次執行定時器程式碼的情況。請看下圖：

　　上圖中，第一個定時器在205ms出新增到佇列中的，但是直到過了300ms才能夠執行。當執行定時器程式碼時，在405ms時有一個定時器程式碼例項被新增到等待佇列中。在605ms處第一個定時器程式碼仍然在執行，同時在程式碼佇列中已經有了另一個定時器的程式碼例項。所以在這個時間點上的定時器程式碼不會被新增到佇列中。結果在205ms處新增的定時器程式碼執行完畢後，405ms處新增的定時器程式碼會立即執行。

　　所以在使用setInterval做動畫時要注意兩個問題：

1. 不能使用固定步長作為做動畫，一定要使用百分比: 開始值 + (目標值 - 開始值) * （Date.now() - 開始時間）/ 時間區間
2. 如果主程序執行時間過長，會出現跳幀的現象

　　為了避免setInterval的兩個缺點，可以使用鏈式setTimeout（）：

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

 　　以上文章內容主要來自《Javascript高階程式設計》