談一談Javascript中setTimeout
阿新 • • 發佈:2019-02-13
前段時間公司在開會的時候提到了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”
以上這些都可以使用一個很有趣的工具來視覺化檢視 視覺化檢視執行佇列情況
如有錯誤,請指出,謝謝