🚀 带你了解JavaScript中的事件循环机制！:Event Loop讲解与实例解析 🎡

嘿，各位 JavaScript 爱好者！👋

你准备好揭开 事件循环 的秘密了吗？这是 JavaScript 中最令人兴奋（也最容易被误解）的概念之一。这次博客中，我们将跳过复杂的理论，通过动手实例来确保你真的 掌握 它。🌟

……

简单讲，事件循环 是 JavaScript 管理多个任务的方式——比如运行代码、等候 API 反馈和响应用户操作。它就像派对上的热情主人 🎉，确保每位来宾（即任务）都能得到应有的关注，不会被冷落。

JavaScript 是 单线程的，也就是说，其主线程每次只能执行一个任务。但是通过事件循环，它让人感觉像是在同时处理多个任务。 🤯

……

1️⃣ 同步编码 🕒

    console.log("1️⃣ 开始烹饪 🍳");  
    console.log("2️⃣ 享用早餐 🍴");  
    console.log("3️⃣ 洗盘子 🧼");  

进入全屏模式，退出全屏

结果为:

1️⃣ 开始做菜 🍳  
2️⃣ 吃早饭 🍴  
3️⃣ 洗盘子 🧼  

点这里全屏模式，点这里退出全屏。

📝 说明: 这些任务会依次完成。

2️⃣ 添加异步操作使用 setTimeout ⏱️

    console.log("1️⃣ 准备开始做饭 🍳");  

    setTimeout(() => {  
      console.log("2️⃣ 吃早餐 🍴 （3秒后吃）");  
    }, 3000);  

    console.log("3️⃣ 洗碗碟 🧼");  

进入全屏 退出全屏

显示为:

2️⃣ 做早饭 🍴  
1️⃣ 开始做饭 🍳  
3️⃣ 洗碗 🧼 （3秒后吃）

进入全屏模式 退出全屏

📝，解释说明：

• setTimeout任务被发送到Web APIs（不属于主线程）。
• 一旦定时器结束，它将被放入回调队列，等待主线程空闲。

• 事件循环确保回调在所有同步任务完成后执行。

• • *

3️⃣ 微任务 vs. 宏任务 🛠️

事件循环优先于 微任务（例如 Promise 回调）而不是 宏任务（例如 setTimeout）。我们来看一个例子：

console.log("1️⃣ 开始烹饪 🍳");  

setTimeout(() => {  
  console.log("2️⃣ 宏任务: 超时等待 ⏳");  
}, 0);  

Promise.resolve().then(() => {  
  console.log("3️⃣ 微任务: Promise ✅");  
});  

console.log("4️⃣ 结束火箭升空 🚀");  

全屏模式, 退出全屏

输出结果:

1️⃣ 开始啦 🍳  
4️⃣ 结束啦 🚀  
3️⃣ 小任务：Promise ✅  
2️⃣ 大任务：Timeout ⏳  

全屏 退出全屏

📝 说明：

即使 setTimeout 的延迟设置为 0ms，Promise 的回调（“微任务”）依然会在 setTimeout 的回调（“宏任务”）之前执行。

4️⃣ 处理繁重的任务 ⚡

你见过页面在执行耗时任务时卡死吗？让我们用异步代码来搞定它！

糟糕的示例（阻塞事件循环）禁止操作（🚫）

    console.log("1️⃣ 开始了 🏁");  

    for (let i = 0; i < 1e9; i++) {}  // 模拟繁重任务  

    console.log("2️⃣ 结束了 🛑");  

全屏 和 退出全屏

更好的例子（使用 setTimeout 分块处理）✅

console.log("1️⃣ 开始 🏁");  

let count = 0;  

function heavyTask() {  
  if (count < 1e6) {  
    count++;  
    if (count % 100000 === 0) console.log(`处理了 ${count} 个项 🔄`);  
    setTimeout(heavyTask, 0); // 让事件循环稍作休息！  
  } else {  
    console.log("2️⃣ 任务结束 ✅");  
  }  
}  

heavyTask();  

进入全屏 退出全屏

1️⃣ JavaScript 首先执行同步代码。

2️⃣ 异步任务（如 setTimeout）由 事件循环 处理。^1

3️⃣ 微任务（Promise）优先于 宏任务（setTimeout）。

4️⃣ 使用异步模式将大任务拆分成小块，以保持用户界面的响应性。

这里有一个小测试，大家可以在下面评论自己的答案哦。👇

    console.log("1️⃣ 嘿 😋");  

    setTimeout(() => {  
      console.log("2️⃣ 延时 ⏳");  
    }, 0);  

    Promise.resolve().then(() => {  
      console.log("3️⃣ Promise 成立 ✅");  
    });  

    console.log("4️⃣ 拜拜 😋");  

点击此处全屏显示 点击此处退出全屏

输出是什么？

A. 1️⃣ 你好，2️⃣ 超时，3️⃣ 承诺，4️⃣ 拜拜

B. 1️⃣ 你好，4️⃣ 拜拜，3️⃣ 承诺，2️⃣ 超时

C. 1️⃣ 你好，3️⃣ 承诺，4️⃣ 拜拜，2️⃣ 超时

在下面写下你的答案，看看你是否真的掌握了事件循环！💬

让我们继续聊吧

如果你觉得这些内容有帮助，就和你的开发者朋友们分享一下吧！让我们一起探索JavaScript吧！🌐

嘿，别忘了关注我，了解更多编程心得！🔥