前段時間公司在開會的時候提到了Javascript裡的setTimeout，同事們的討論很有意思，決定和大家分享一下。

話不多說，上程式碼

//程式碼塊A
document.querySelector('button').onclick = function(){    /
 setTimeout(function f1() {
        console.log('你點選了button!');
    }, 2000);
}


//程式碼塊B
console.log("這是第一條日誌");


//程式碼塊C
setTimeout(function f2() {
    console.log("快去點選按鈕吧");
}, 1000);


//程式碼塊D
console.log("這是第二條日誌");
 

1.這是第一條日誌

2.這是第二條日誌

3.快去點選按鈕吧   （延時1秒執行）

點選button 延時2秒輸出“你點選了button!”

實際上執行過程是這樣的的：

1.主執行緒執行程式碼塊A ，發現有事件繫結，將事件註冊到 Web API上

2.主執行緒執行程式碼塊B   ---->輸出‘這是第一條日誌’

3.主執行緒執行程式碼塊C，發現有延時，將程式碼塊C的內容拿出主執行緒，倒計時等待執行，倒計時完畢則進入回撥執行佇列  

4.主執行緒執行程式碼塊D（不被程式碼塊C阻塞） --->輸出‘這是第二條日誌’

5.主執行緒全部執行完了，開始一個一個取回調執行佇列的程式碼塊來執行  --->輸出'快去點選按鈕!'

6.點選button時候，執行web api上之前註冊的事件，發現是timeout，則倒計時等待，倒計時完畢則進入回撥執行佇列  

7.主執行緒只要空閒，則執行回撥執行佇列  -->輸出“你點選了button”

以上這些都可以使用一個很有趣的工具來視覺化檢視 視覺化檢視執行佇列情況

如有錯誤，請指出，謝謝