把繁琐复杂吃透吃透，让 JavaScript 的事件循环变得触手可及

2023-12-20 21:35:25

JavaScript 事件循环：深入理解幕后机制

欢迎踏入 JavaScript 的世界，一个永不停息的舞池，在那里各种事件翩翩起舞。事件循环控制着代码的执行顺序，确保所有事件都能得到及时的处理。掌握事件循环的奥秘将助力我们成为 JavaScript 大师，编写出高性能、可维护的代码。

单线程与非阻塞的舞台

JavaScript 是单线程的，这意味着同一时刻只能执行一段代码。就好比一个只有一个舞池的舞会，一次只能有一对舞者起舞。不过，JavaScript 是非阻塞的，这意味着某些任务不会阻塞其他任务的执行。仿佛舞池旁边还有许多休息区，舞者可以在此等待轮到自己起舞。

任务队列与消息队列的后台管理

在舞池的幕后，两个重要队列默默地工作着：任务队列和消息队列。任务队列就像排队等候跳舞的舞者队伍，而消息队列则是一个等待处理的事件列表。当一个事件发生时，它会被添加到消息队列中。轮到它时，它将被移到任务队列中，等待执行。

宏任务与微任务的舞步差异

舞池中存在两种舞步：宏任务和微任务。宏任务就像一段完整的舞蹈，而微任务则只是一个简单的舞步。宏任务包括脚本执行、setTimeout 和 setInterval 等操作，而微任务包括 Promise、MutationObserver 和 process.nextTick 等操作。宏任务和微任务的执行顺序是有区别的：微任务总是在宏任务之前执行。

执行栈的舞台中央

执行栈就像舞台中央，一次只能有一段代码在此执行。当一个宏任务或微任务被移到任务队列中时，它会进入执行栈，开始执行。执行栈会一直执行下去，直到当前任务完成或遇到异步操作。当遇到异步操作时，执行栈会暂停当前任务的执行，将控制权交给异步操作。当异步操作完成后，执行栈会继续执行当前任务。

异步与同轮的舞池节奏

舞池中还有两种不同的节奏：异步和同轮。异步舞池节奏是指当一个异步操作发生时，执行栈会暂停当前任务的执行，将控制权交给异步操作。当异步操作完成后，执行栈会继续执行当前任务。同轮舞池节奏是指当一个微任务发生时，执行栈会立即执行该微任务，然后再继续执行当前任务。

轮询与回调的舞池合作

舞池中还有两种合作方式：轮询和回调。轮询就像一个舞者不断地询问舞池管理员是否轮到自己跳舞，而回调就像一个舞池管理员告诉舞者轮到他们跳舞了。轮询是一种低效的合作方式，因为舞者需要不断地询问舞池管理员。而回调是一种高效的合作方式，因为舞池管理员会主动通知舞者轮到他们跳舞了。

代码示例

// 宏任务：
console.log('宏任务 1');
setTimeout(() => {
  console.log('宏任务 2');
}, 0);
console.log('宏任务 3');

// 微任务：
Promise.resolve().then(() => {
  console.log('微任务 1');
});
console.log('宏任务 4');