ywwwtseng · April 20, 2025 08:58 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 19, 2025
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -1,4 +1,4 @@
-## 🌀 Event Loop Queue vs Job Queue 差異說明
+# 🌀 Event Loop Queue vs Job Queue 差異說明
 
 | 項目 | Event Loop Queue（Macro Task Queue） | Job Queue（Micro Task Queue） |
 |------|----------------------------------------|-------------------------------|

diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -39,4 +39,4 @@ console.log('2'); // 同步
 ```
 
 ### 參考
-[JavaScript execution model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)
+[JavaScript execution model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model)
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -39,4 +39,4 @@ console.log('2'); // 同步
 ```
 
 ### 參考
-![JavaScript execution model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)
+[JavaScript execution model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -39,4 +39,4 @@ console.log('2'); // 同步
 ```
 
 ### 參考
-!(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)[JavaScript execution model]
+![JavaScript execution model](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -39,4 +39,4 @@ console.log('2'); // 同步
 ```
 
 ### 參考
-![https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop](JavaScript execution model)
+!(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop)[JavaScript execution model]
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -36,4 +36,7 @@ Promise.resolve().then(() => {
 }); // 放入 Job Queue
 
 console.log('2'); // 同步
-```
+```
+
+### 參考
+![https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop](JavaScript execution model)
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -22,7 +22,7 @@
 ... 如此循環
 ```
 
-### 範例
+### 🧪 範例
 
 ```js
 console.log('1'); // 同步

diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -8,6 +8,8 @@
 | 🥇 優先順序 | 較低，等微任務執行完才會輪到它 | 較高，會優先執行完所有 microtasks 才會進入下一個 macro task |
 | ✅ 用途 | 處理整體非同步任務 | 處理細粒度更新、異步邏輯鏈接 |
 
+### 📊 執行順序圖（事件循環階段）
+
 ```
 [ 呼叫堆疊空了 ]
        ↓
@@ -18,4 +20,20 @@
 [ 清空 Microtasks ]
        ↓
 ... 如此循環
+```
+
+### 範例
+
+```js
+console.log('1'); // 同步
+
+setTimeout(() => {
+  console.log('4');
+}, 0); // 放入 Task Queue
+
+Promise.resolve().then(() => {
+  console.log('3');
+}); // 放入 Job Queue
+
+console.log('2'); // 同步
 ```
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -6,4 +6,16 @@
 | 🎯 負責處理 | setTimeout、setInterval、I/O callbacks、DOM Events 等 | Promise.then()、queueMicrotask()、MutationObserver |
 | ⏳ 執行時機 | 每輪事件循環的最後階段才會執行 | 每個 task 執行結束後立即清空 microtasks |
 | 🥇 優先順序 | 較低，等微任務執行完才會輪到它 | 較高，會優先執行完所有 microtasks 才會進入下一個 macro task |
-| ✅ 用途 | 處理整體非同步任務 | 處理細粒度更新、異步邏輯鏈接 |
+| ✅ 用途 | 處理整體非同步任務 | 處理細粒度更新、異步邏輯鏈接 |
+
+```
+[ 呼叫堆疊空了 ]
+       ↓
+[ 清空所有 Microtasks（Job Queue） ]
+       ↓
+[ 執行下一個 Macro Task（Event Loop Queue） ]
+       ↓
+[ 清空 Microtasks ]
+       ↓
+... 如此循環
+```
diff --git a/event-loop-queue-vs-job-queue.md b/event-loop-queue-vs-job-queue.md
@@ -0,0 +1,9 @@
+## 🌀 Event Loop Queue vs Job Queue 差異說明
+
+| 項目 | Event Loop Queue（Macro Task Queue） | Job Queue（Micro Task Queue） |
+|------|----------------------------------------|-------------------------------|
+| 📌 又稱 | Task Queue / Callback Queue | Microtask Queue / Job Queue |
+| 🎯 負責處理 | setTimeout、setInterval、I/O callbacks、DOM Events 等 | Promise.then()、queueMicrotask()、MutationObserver |
+| ⏳ 執行時機 | 每輪事件循環的最後階段才會執行 | 每個 task 執行結束後立即清空 microtasks |
+| 🥇 優先順序 | 較低，等微任務執行完才會輪到它 | 較高，會優先執行完所有 microtasks 才會進入下一個 macro task |
+| ✅ 用途 | 處理整體非同步任務 | 處理細粒度更新、異步邏輯鏈接 |
No results found