异步编程：揭开 JavaScript 事件循环的神秘面纱

2024-02-05 18:10:05

揭开 JavaScript 事件循环的神秘面纱：掌控异步世界的指挥棒

JavaScript 的单线程之旅

JavaScript 就像一位舞台指挥，一次只能专注于一个演员（任务）。与乐队里的多位演奏家同时合奏不同，JavaScript 只能演奏一个音符（执行一个任务），然后才能继续下一段旋律（下一个任务）。这种单线程特质让 JavaScript 具备了独特的节奏和韵律。

事件循环：掌控代码节奏

事件循环就像一位无形的指挥棒，协调着 JavaScript 的表演。它不断地检查两个队列，就像两个舞台：事件队列和微任务队列。当有演员（任务）上台表演时，事件循环会请第一位演员出场。

事件队列： 灯光照射下的舞台，容纳着 DOM 事件（单击、鼠标移动）和计时器（setTimeout、setInterval）等异步演员。
微任务队列： 幕后的后台，在事件队列演员表演时，偷偷溜上舞台的新演员，包括 Promise.then() 和 MutationObserver 回调。

同步与异步：两种演员的舞台

JavaScript 的演员可以分为两种：同步和异步。

同步演员： 主角，在舞台上闪耀登场，立即表演，不让其他演员插话。
异步演员： 配角，礼貌地等待自己的出场时间，不会抢戏，在稍后的时间点优雅地登台。

事件循环与同步/异步：幕后协奏

当 JavaScript 剧本开始时，同步演员会率先登场。一旦他们的表演结束，事件循环会转而检查事件队列，邀请下一个演员出场。如果队列中有异步演员，他们会按顺序表演，而不会打断同步演员的表演。

代码示例：见证舞台上的精彩表演

让我们用一个代码示例来说明事件循环的运作方式：

console.log('同步任务 1'); // 幕布升起，同步演员登场

setTimeout(() => {
  console.log('异步任务 1'); // 事件队列中的异步演员准备就绪
}, 0);

Promise.resolve().then(() => {
  console.log('微任务 1'); // 微任务队列中的微任务演员摩拳擦掌
});

console.log('同步任务 2'); // 同步演员再次登场