淺談 Event Loop

以前看了一篇關於 Event Loop的文章 作了下面的筆記 

 

Event Loop 是解決JavaScript 單線程問題的一種運行機制 

 

當程序接受到了請求以後. 就會把請求交給Event Loop 而後繼續往下執行 這樣就不用等待請求返回,繼續執行下面的代碼, 當Event Loop完成後會把結果返回給程序 程序再調用已經設定好的回調函數,完成任務

可是就會出現了以下的問題

1. 程序繼續往下跑是一個進程 那Event Loop跑的難道不是另外一個線程嗎?
2. 若是Event Loop 接受到不少個請求, 那是按什麼順序去執行?
3. Event Loop 完成後把結果返回給程序, 程序是馬上執行嗎? 正在執行的代碼怎麼辦?

而後我在 stackoverflow 上看到 「Understanding the Event Loop」和 tuts+ 裏的 「Event-Based Programming: What Async Has Over Sync」

下面是我對Event Loop的我的理解 

 

像 tuts+ 裏說的 「the Event Loop is a queue of callback functions.」

 

JavaScript執行程序, 當執行到 異步代碼(async code) 的時候, 會把回調函數放在Event Loop裏,而後繼續往下執行, 當區塊中的其餘所有代碼執行完以後, 再去執行Event Loop裏面的回調函數.

 

怎麼驗證呢, 咱們使用JavaScript裏最基礎的異步函數 setTimeout()

console.log('a');
setTimeout(function() {
    console.log('b');
}, 0);
console.log('c');

沒錯 輸出爲 a c b 這就能夠證實上面所說的 回調函數輸出b 但必定要等區塊裏的其餘代碼執行完後, 才能夠執行 再看一個例子

console.log('a');
test();
console.log('c');

function test() {
    console.log('d');
    setTimeout(function() {
        console.log('b');  
    }, 0);
    console.log('e');                  
}

輸出 a d e c b 這下就更清楚明白了 因此Event Loop其實並非另外一個線程 只是一個放回調函數的隊列 等待線程去執行 那就解決了上面的兩個問題了, 還有一個問題, 若是Event Loop裏有不少回調函數 他們執行的順序又是怎樣呢 咱們先來看一個例子

setTimeout(function() {
    console.log('a');
}, 20);

setTimeout(function() {
    console.log('b');
}, 10);

setTimeout(function() {
    console.log('c');
}, 30);

輸出是 b a c 這樣看起來Event Loop裏好像沒有什麼固定順序可言 但實際上, Event Loop裏是一個先進先出的隊列(FIFO) 先放進去的回調函數會先拿出來執行.

 

以上就是我對Event Loop的理解

固然還有革命性的Ajax

xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
    if ( xmlhttp.readyState === 4 ) {
        console.log( data );
    }
};
xmlhttp.send( null );

底層 XmlHttpRequest(XHR)對象發送請求, 回調函數去處理XHR的readystatechange事件, 當XHR的send方法執行的時候, XHR就開始工做, 內部的readystatechange事件就觸發使readystate屬性變化, 而且只有當XHR完成從遠端服務器接收回應, 回調函數纔開始執行.

 

更新: 整個瀏覽器能夠說就是下面的這張圖

 

Heap :  用來存放變量

Stack :  用來執行 JavaScript   (只會執行位於stack裏頂部的代碼)

Web API :  執行DOM XMLHttpRequest setTimeout等 執行完後把回調函數放在callback queue裏

　　　　　 https://developer.mozilla.org/en-US/docs/Web/API

Event loop : 只有當stack爲空而且 callback queue裏有回調函數的時候 纔會把callback queue裏的函數代碼放到stack裏執行

 

 

參考資料: http://stackoverflow.com/questions/21607692/understanding-the-event-loop

　　　　  http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027　　

               http://www.ruanyifeng.com/blog/2013/10/event_loop.html?from=ourjs.com

 

 

若有錯誤 歡迎指正 : )