Javascript非同步程式設計之setTimeout與setInterval
在談到非同步程式設計時，本人最主要會從以下三個方面來總結非同步程式設計(注意：特別解釋：是總結，本人也是菜鳥，所以總結不好的，請各位大牛多多原諒！)
1. setTimeout與setInterval詳細分析基本原理。
2. 分散式事件(pub/sub).
3. Promise物件和Deferred物件。
接下來這篇部落格會總結setTimeout和setInterval基本點，對於上面三點會分三篇部落格分別來總結，對於知道上面三點的人，但是又不是非常瞭解全面知識點的碼農來說，沒有關係的，我們可以慢慢來學習，來理解，或者我總結不全面的或者不好地方可以留言，學習本來就是要互動，才有提高。當然對於那些知識大牛來說，也可以看下，如果我總結不好的話，也可以提提意見，我也可以多學習學習下！
在研究setTimeout與setInterval之前，我們可以先來看看一個小小的demo，其實總結與研究就是要多做demo，因為有的事情我們看起來很簡單，真正做起來的時候不是那麼一回事。比如如下：
for(var i = 1; i <= 3; i++) {
setTimeout(function(){
console.log(i);
},100);
}
如果javascript語言不是很熟悉的話，很多人會理所當然的認為for迴圈會分別列印出1,2,3. 但是事實不是這樣的，會輸出3次4. 要理解為什麼會列印三次4，我們先來理解setTimeout這個函式吧，很多人會認為上面的setTimeout的意思是這樣的，在100毫秒後執行setTimeout的回撥函式，其實這樣的理解是有誤的，其實setTimeout與setInterval真正的含義如下：
- setTimeout：在指定的毫秒數後，將定時任務處理的函式新增到執行佇列的隊尾。
- setInterval：按照指定的週期(以毫秒數計時)，將定時任務處理函式新增到執行佇列的隊尾。
setTimeout與setInterval且都是非同步的，所以我們現在可以來理解下上面迴圈為什麼一直都是4呢？其實呼叫setTimeout時候，會有一個延時事件排入佇列，然後setTimeout呼叫之後的那行程式碼執行，接著是再下一行程式碼，直到再也沒有任何程式碼了，javascript虛擬機器才會問，佇列裡還有嗎？如果佇列中至少有一個事件適合於觸發，比如上面的setTimeout函式，則會呼叫setTimeout那個函式。所以上面的程式碼先for迴圈，迴圈結束，而 i === 4一直遞增，直到不再滿足i<=3為止。所以就列印了3個4.
我們再來看看下面的函式，如下：
setTimeout(function(){
console.log("列印我，我是非同步執行的");
},100);
console.log("我是新來的，我要先執行");
執行結果是：先列印出 “我是新來的，我先執行”這句程式碼，接著列印”列印我，我是非同步執行的”程式碼。
二：理解javascript執行緒。
Javascript引擎是單執行緒執行的，瀏覽器無論在什麼時候都只且只有一個執行緒在執行的。
那麼單執行緒是如何配合瀏覽器核心處理這些定時器和相應瀏覽器事件呢？
瀏覽器核心允許多個執行緒非同步執行，這些執行緒在核心控制下相互配合以保持同步，比如一個瀏覽器至少有3個以上的執行緒，有：javascript引擎執行緒，介面渲染執行緒，瀏覽器事件觸發執行緒，除這些以外，也有一些執行完的執行緒，比如http請求執行緒，這些非同步執行緒都會產生不同的非同步的事件。
介面渲染執行緒：
該執行緒負責渲染瀏覽器HTML介面元素，當介面需要重繪或由於某種操作引發迴流(reflow)，該執行緒就會執行，該執行緒與javascript引擎執行緒是互斥的，因為javascript引擎執行指令碼期間，瀏覽器渲染執行緒都是出於掛起狀態的，比如我們常見的是在頁面head標籤內不建議把JS放在頭部的原因，希望要把JS放在尾部或者使用非同步載入等操作。因此在指令碼中執行對介面進行更新操作，如動態新增節點或者刪除節點等更新會把這些事件放在佇列當中，等javascript引擎空閒時才有機會渲染出來。
瀏覽器事件觸發執行緒：
使用者單擊一個已附加有單擊事件處理器dom元素時，會有一個單擊事件排入佇列，但是該單擊事件處理器要等到當前所有正在執行的程式碼均已結束才會執行。
比如如下一個小demo，我們平時寫程式碼時候，特別用原審javascript寫tab切換的時候，經常會碰到如下程式碼，比如點選一個li標籤，希望切換到對應的內容上來。如下點選事件demo。我這裡使用jquery來演示下：
HTML程式碼如下結構：
<li class="container">點選我1</ li >
< li class="container">點選我2</ li >
< li class="container">點選我3</ li >
JS如下：
var lists = $(".container");
for(var i = 0, ilen = lists.length; i < ilen; i++) {
$(lists[i]).bind('click',function(){
console.log(i); // 列印3
});
}
上面的程式碼點選一下，列印出3(不是0,1,2)，原理還是和上面一樣。
定時觸發執行緒：
這裡談到的定時計數器不是由javascript引擎計數的，因為javascript引擎是單執行緒的，如果處於堵塞狀態就計不了時的，它必須依賴外部計時並觸發定時，所以佇列中的定時事件也是非同步事件。
三：理解setTimeout與setInterval非同步事件：
Javascript最基礎的非同步函式是setTimeout與setInterval，setTimeout會在一定的時間後執行相應的函式，它接受一個回撥函式和一個毫秒時間，比如如下：
console.log( "a" );
setTimeout(function() {
console.log( "c" )
}, 500 );
setTimeout(function() {
console.log( "d" )
}, 500 );
setTimeout(function() {
console.log( "e" )
}, 500 );
console.log( "b" );
控制檯先輸出“a”、“b”，大約500毫秒後，再看到“c”、“d”、“e”。
但是如果我把第一個setTimeout的延時時間改大一點或者改為600毫秒，那麼列印出來就分別是a，b，d，e，c了。你可能聽過事件迴圈這個詞，它是用於描述佇列的工作方式的。當非同步函式執行時，回撥函式就會被壓入這個佇列裡面，javascript引擎直到非同步函式執行完，才會開始出來這個事件迴圈，這意味著javascript也並不是多執行緒的，事件迴圈是一個先進先出的（FIFO）佇列，這說明回撥是按照他們被加入佇列的順序執行的(在相同的情況下。)，但是如果延遲時間不一樣的話，那麼就不會了，就像上面的列子把定時毫秒數改大點輸出來的就不一樣了。
四：非同步函式的型別
在Javascript環境中提供的非同步函式分為2大類：I/O函式和計時函式。
一：非同步的I/O函式。
我們都知道建立nodeJS不是為了在伺服器上執行javascript，而是因為javascript語言可以完美的實現非堵塞式的I/O。比如典型的ajax請求，如下程式碼：
var url = "http://localhost/setTimeout/index2.php";
var xhr=new XMLHttpRequest;
xhr.open("GET","http://localhost/setTimeout/index2.php",true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState<4)return;
alert(xhr.responseText);
};
alert("Ajax還沒完成呢？");
執行結果後先執行”Ajax還沒完成呢？”，後執行onreadystatechange的回撥函式。在ajax函式中先執行send方法後，再繫結事件呢，而不是先繫結事件，再send呢？
其實xhr物件使用了其他執行緒，這裡涉及到一些跨執行緒通訊的問題，跨執行緒訪問資料時需要使用委託，否則會發生資料衝突，所謂委託其實就是一個執行緒向另一個執行緒傳送訊息，但是xhr執行緒想要觸發主執行緒xhr物件的onreadystatechange事件就需要委託，而主執行緒目前是忙碌狀態，它正在出理初始化訊息，只有等到初始化訊息空閒後才會執行子執行緒的委託處理，而初始化訊息空閒時就意味著onreadystatechange事件被繫結上了，所以後面的程式碼執行會永遠比xhr執行緒執行要快。所以先會執行後面的alert對話方塊，再執行onreadystatechange事件。當然ajax請求第三個引數我們可以設定成false，同步請求，一般情況下還是非同步請求好，但是為了處理一些特殊的需求，也可以設定同步請求(注意：同步請求會堵塞瀏覽器載入，所以如果請求的資料很大的時候，還是考慮非同步請求。)，比如一些常見的需求，傳送ajax請求後，要開啟一個新視窗這樣的一個需求，我們都知道如果是非同步請求chrome和firefox直接會被攔截掉，但是如果我設定了同步請求就可以實現傳送ajax請求後，再開啟一個新視窗了。
二：非同步的計時函式。
我們已經看到，非同步函式非常適用於I/O操作，但是我們現在想讓一個函式在將來某時刻來執行或者一個動畫函式在將來某個時候來執行動畫效果，這時候我們會想到javascript中的setTimeout與setInterval函式了。但是setTimeout與setInterval有如下缺陷：
- 當同一個javascript程式執行的程式碼時候，任何javascript計時函式都無法使程式碼執行起來，如下demo測試：
var start = new Date;
stTimeout(function(){
var end = new Date;
console.log("Time:",end-start,'ms');
},500);
while(new Date - start < 1000) {
}
想列印出上面的console.log, 在瀏覽器一直重新整理看到，第一次1020ms，第二次1029ms，反正結果一直是1s以上，也就是說後面的函式如果執行時間非常長的話，那麼setTimeout程式碼永遠不會執行。
2. setInterval根據HTML規範可知：在一個小時之內會延遲 4-5ms這麼一個延遲。也就是說使用這個計時不是非常精確。