淺談javascript的Event Loop(事件迴圈)

無論是面試還是開發，我們總是有一些疑問
你：什麼疑問？
如：不是說好了JavaScript是單執行緒麼，處理的非同步程式碼？
為什麼我寫的一個ajax請求，但是卻先執行的下面的console.log？
再或者這樣,
面試官：小王啊，你知道什麼是事件迴圈麼？
小王：emm…
五分鐘後…
你這次表現的很優秀，但是和我們單位這個崗位有一些偏差，江湖再見！

那麼，現在我們就以最短的事件瞭解javascript的Event Loop，敲黑板。。。
燃燒我的卡路里！

下面這段程式碼相信你一定不陌生！

setTimeout
 
(function(){
    console.log('定時器開始啦')
}); 
console.log(123)
// 123
// 定時器開始啦

為什麼呢？？？首先我們從JavaScript的執行機制開始說起！

眾所周知，JavaScript程式碼在執行時，會進入一個執行上下文，執行上下文可以理解為一個當前程式碼的執行環境,在這個執行環境中，javascript會以一個棧的方式去處理它，執行完，出棧，輪到它，進棧。就像只有一個視窗的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如果一個任務耗時過長，那麼後一個任務也必須等著。於是，把任務分成兩類：

1. 同步任務
2. 非同步任務
   聰明的你肯定已經猜到了，沒錯，我們執行棧中的任務都是同步任務，當我們執行完所有的同步任務之後，就會去訪問另一個佇列，這個佇列中存放的是所有非同步的任務，也就是我們常說的Event Table，如果我們執行完之後，去訪問Event Table，但是，這裡面還是有沒執行完的怎麼辦？先把執行完的拿過來，跑完，然後繼續去訪問，繼續跑，直到Event Table中的任務為空。如圖：
   

導圖要表達的內容用文字來表述的話：

1. 同步和非同步任務分別進入不同的執行"場所"，同步的進入主執行緒，非同步的進入Event Table並註冊函式。
2. 當指定的事情完成時，Event Table會將這個函式移入Event Queue。
3. 主執行緒內的任務執行完畢為空，會去Event Queue讀取對應的函式，進入主執行緒執行。
4. 上述過程會不斷重複，也就是常說的Event Loop(事件迴圈)。