[JavaScript] 究竟什麼是Event loop?
更新於 發佈於 閱讀時間約 3 分鐘
setTimeout(function(){console.log('delay 0 sec')}, 0)
console.log('Hello!')執行以上程式碼，然後看到了這個結果：
為什麼「延遲0秒」的函式寫在上方，但在console印出的結果，它還是被排在第二順位？
利用AC教材提供的youtube演講連結一窺究竟：
演講提供了更多JS的細節概念，身為JS新手的我還在消化，但若針對教案提出的問題來回答，加上利用google大神查到MDN的文件，大致可以回答。
JavaScript 的並行模型（concurrency model）是基於「事件循環（event loop）」。
視覺化呈現（Visual representation）
堆疊(Stack)
呼叫函式（Function）會形成一個 frame 的堆疊。
function foo(b) {var a = 10;return a + b + 11;}function bar(x) {var y = 3;return foo(x * y);}console.log(bar(7));
當呼叫 bar 時，會產生一個含有 bar 的參數及區域變數的 frame，而在 bar 呼叫了 foo 時，含有 foo 參數及變數的第二個 frame 就會被置於堆疊的最上面。當 foo 回傳後，最上面的 frame 會被抽離堆疊（僅留下 bar 的呼叫 frame）。然後當 bar 返回之後，堆疊就會清空。
堆積(Heap)
物件被分配在一個堆積中，一個只表示記憶體中的一個無結構的大區域。
佇列(Queue)
JavaScript 執行環境包含一個訊息佇列，裡面是待處理的訊息，其中每個訊息都與一個 function 相關聯。當堆疊中有足夠空間時，會從訊息佇列拿取一個訊息進行處理，處理過程包含了呼叫相關聯的 function。只有當堆疊清空時，該訊息才算是完成處理。
事件循環(Event Loop)
第一行console程式碼被執行，排到stack上，很快的被印出。
第二行的setTimeout函式並不在V8引擎中運作，在瀏覽器之下必須類似由外頭呼叫的方式進行，其他像DOM、AJAX也都為此方式進行。呼叫後不會直接被推到stack區，會先在webapis區等待設定的延遲秒數，
此時第三行的console也會被推到stack區，跟著馬上被印出。此時setTimeout函式還在等待時間。
時間到達設定秒數後，setTimeout函式內要執行的事情會被放到task queue區，此queue必須要等到stack區完全被清空，才會往stack區堆放執行。
此狀況即使把延遲秒數設定為0依然成立，原因為:
「零延遲」並非意味著回呼函式（callback function）會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 setTimeout (en-US) 函式並非是程式會過了該段時間就會執行，而是會參考佇列中等待的訊息數量。 在下面範例中，「this is just a message」會寫在 setTimeout 的回呼訊息被執行之前，因為該時間段參數是要求執行環境處理所需的最少等待時間，而非一個保證時間。
由於console.log走的路徑和setTimeout不同，造成即使先寫出setTimeout程式碼，印出的順序依然會以單純直接console.log為先，setTimeout為後，無論延遲秒數的設定為何。
4會員
5內容數
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章節主要介紹了JavaScript中的流程控制，包括條件語句（如if、else if、else和三元運算子）和循環結構（如for迴圈、while迴圈等）。同時，也提供了如何使用break、continue和label來控制迴圈的執行。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
※ 迴圈控制的兩個指令：break(跳脫)、continue(繼續)
break(跳脫)：當遇到一個需要強制脫離迴圈的情境，使用break(跳脫)就會直接跳出迴圈。
continue(繼續)：用於跳過迴圈目前的迭代，直接開始下一次迭代的執行。
造成無限迴圈的例子：
說明：
當 x 的值
※ 何謂巢狀迴圈(NESTD LOOP)：
指的是一個迴圈內包含另一個迴圈的結構。在程式設計中，這種結構常用於需要進行多層次迭代的場合，例如處理多維數組、逐行逐列處理表格資料等。
※ 例子：九九乘法表
說明：
外層迴圈：for (let i = 1; i <= 9; i = i + 1) 這
※ 迴圈(for loop)介紹：
迴圈的用途是重複執行程式碼，只要條件滿足，就會執行特定的動作。
for (let i = 0; i < 10; i = i + 1) {
console.log(i);
}
說明：
for：對於。
let：因為迭代器的數值會一直改變所以要用let
for，while，do while語法介紹
for loop
for比較偏向固定圈數型的迴圈
語法
for(計數變數初值; 布林運算式 ; 增量運算)
{
：
一般指令;
：
}
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本章節主要介紹了JavaScript中的流程控制，包括條件語句（如if、else if、else和三元運算子）和循環結構（如for迴圈、while迴圈等）。同時，也提供了如何使用break、continue和label來控制迴圈的執行。
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
※ Promise基本介紹
什麼是 Promise？
Promise 是 JavaScript 的一個構造函式，用於創建表示非同步操作的物件實例。使用 new Promise() 時，你會創建一個包含非同步操作的實例，這個實例可以透過其繼承的方法如 then(), catch(), 和 fina
※ 同步概念：
單純地「由上而下」執行程式碼，而且一次只執行一件事，也就是「按順序執行，一個動作結束才能切換到下一個」。缺點是你需要「等待」事情執行完畢，才能繼續往下走。
※ 非同步概念：
盡可能讓主要的執行程序不需要停下來等待，若遇到要等待的事情，就發起一個「非同步處理」，讓主程序繼續執行，
※ 函式基礎介紹：
※ JavaScript 特殊的函式特性：
函式可以當成值來傳遞 (可以放進變數或放進物件)
函式可以當成函式的參數
callback - 在特定事件中觸發函式 (非同步特性)
※ 函式的基本寫法：
※ 調用 (invoke) 函式：
"調用" 意指呼叫或執行
※ 迴圈控制的兩個指令：break(跳脫)、continue(繼續)
break(跳脫)：當遇到一個需要強制脫離迴圈的情境，使用break(跳脫)就會直接跳出迴圈。
continue(繼續)：用於跳過迴圈目前的迭代，直接開始下一次迭代的執行。
造成無限迴圈的例子：
說明：
當 x 的值
※ 何謂巢狀迴圈(NESTD LOOP)：
指的是一個迴圈內包含另一個迴圈的結構。在程式設計中，這種結構常用於需要進行多層次迭代的場合，例如處理多維數組、逐行逐列處理表格資料等。
※ 例子：九九乘法表
說明：
外層迴圈：for (let i = 1; i <= 9; i = i + 1) 這
※ 迴圈(for loop)介紹：
迴圈的用途是重複執行程式碼，只要條件滿足，就會執行特定的動作。
for (let i = 0; i < 10; i = i + 1) {
console.log(i);
}
說明：
for：對於。
let：因為迭代器的數值會一直改變所以要用let
for，while，do while語法介紹
for loop
for比較偏向固定圈數型的迴圈
語法
for(計數變數初值; 布林運算式 ; 增量運算)
{
：
一般指令;
：
}