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這么一個延遲。也就是說使用這個計時不是非常精確。