From 719a8847dc656f931fb8fa578735b6f106d1216b Mon Sep 17 00:00:00 2001
From: Xicheng Guo <xicheng_guo@wistron.com>
Date: Tue, 4 Jun 2024 16:37:16 +0800
Subject: [PATCH] add event-loop md

---
 src/.vitepress/sidebar.yaml                   |  2 ++
 src/index.md                                  | 16 +++++++---
 .../javascript-engine/event-loop.md           | 31 +++++++++++++++++++
 3 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/javascript/ecma-script/javascript-engine/event-loop.md

diff --git a/src/.vitepress/sidebar.yaml b/src/.vitepress/sidebar.yaml
index c775800..65b9d05 100644
--- a/src/.vitepress/sidebar.yaml
+++ b/src/.vitepress/sidebar.yaml
@@ -19,6 +19,8 @@
             link: /javascript/ecma-script/javascript-engine/scope-chain
           - text: this 关键字
             link: /javascript/ecma-script/javascript-engine/this-keyword
+          - text: 事件循环
+            link: /javascript/ecma-script/javascript-engine/event-loop
       - text: 变量声明
         link: /javascript/ecma-script/variable-declaration
       - text: 比较算法
diff --git a/src/index.md b/src/index.md
index e6672be..afdbf1d 100644
--- a/src/index.md
+++ b/src/index.md
@@ -23,8 +23,16 @@ import MarkMap from './MarkMap.vue';
             - [块级作用域](javascript/ecma-script/javascript-engine/scope#块级作用域)
           - [作用域链](javascript/ecma-script/javascript-engine/scope-chain)
           - [this 关键字](javascript/ecma-script/javascript-engine/this-keyword)
-        - [变量声明](javascript/ecma-script/variable-declaration)
-        - [比较算法](javascript/ecma-script/comparison-algorithm)
+          - [事件循环](javascript/ecma-script/javascript-engine/event-loop)
+        - 变量声明
+          - [var](javascript/ecma-script/variable-declaration#var)
+          - [let](javascript/ecma-script/variable-declaration#let)
+          - [const](javascript/ecma-script/variable-declaration#const)
+        - 比较算法
+          - [==](javascript/ecma-script/comparison-algorithm#松散相等)
+          - [===](javascript/ecma-script/comparison-algorithm#严格相等)
+          - [SameValue](javascript/ecma-script/comparison-algorithm#samevalue)
+          - [SameValueZero](javascript/ecma-script/comparison-algorithm#samevaluezero)
         - [浅拷贝和深拷贝](javascript/ecma-script/shallow-copy-and-deep-copy)
         - 表达式与操作符
           - [条件访问表达式（?.）](javascript/ecma-script/expression-and-operator/conditional-access-expression)
@@ -57,9 +65,7 @@ import MarkMap from './MarkMap.vue';
           - [自定义迭代器](javascript/ecma-script/iterators-and-generators/custom-iterator)
           - [生成器](javascript/ecma-script/iterators-and-generators/generator)
         - JSON
-          - 什么是 JSON
-            - [介绍](javascript/ecma-script/json/what-is-json#介绍)
-            - [历史](javascript/ecma-script/json/what-is-json#历史)
+          - [什么是 JSON](javascript/ecma-script/json/what-is-json)
           - JSON 数据格式
             - [简单值](javascript/ecma-script/json/json-data-format#简单值)
             - [对象](javascript/ecma-script/json/json-data-format#对象)
diff --git a/src/javascript/ecma-script/javascript-engine/event-loop.md b/src/javascript/ecma-script/javascript-engine/event-loop.md
new file mode 100644
index 0000000..6e66142
--- /dev/null
+++ b/src/javascript/ecma-script/javascript-engine/event-loop.md
@@ -0,0 +1,31 @@
+# 事件循环
+
+## 什么是事件循环
+
+事件循环机制是 JavaScript 实现非阻塞异步编程的核心原理。
+
+## 事件循环的执行过程
+
+::: details 参考代码
+
+```js
+console.log("Test Start");
+setTimeout(() => console.log("setTimeout"), 0);
+Promise.resolve("Promise").then((res) => console.log(res));
+console.log("Test End");
+
+// Test Start
+// Test End
+// Promise
+// setTimeout
+```
+
+:::
+
+首先以同步方式执行代码，然后事件循环将检查微任务队列。
+
+如果微任务队列不为空，则依次执行队列中的任务，直到队列被清空。
+
+微任务队列中的任务清空后，事件循环会从宏任务队列中取出一个任务执行。
+
+每执行完一个宏任务，事件循环会再次检查微任务队列，重复上述过程。