深入理解JavaScript的事件循环机制

导语：

JavaScript 作为一门单线程语言，却能高效处理各种异步操作，这背后离不开其独特的事件循环（Event Loop）机制。理解事件循环，不仅能让你更好地驾驭 JavaScript，还能帮你避免常见的异步陷阱。如果你对 JavaScript 的异步行为感到困惑，那么这篇文章将为你揭开它的神秘面纱。

正文：

1. JavaScript 是单线程的，为什么还能处理异步？

首先，我们要明确一个概念：JavaScript 引擎本身是单线程的，这意味着它一次只能执行一个任务。那为什么我们还能使用 setTimeout、fetch 等异步操作，而不阻塞主线程呢？

这是因为 JavaScript 的运行环境（比如浏览器或 Node.js）并非单线程的，它们提供了额外的能力，比如：

Web API (浏览器)： 提供了诸如 setTimeout、DOM Events、fetch 等接口。
Node.js API (Node.js)： 提供了文件 I/O、网络请求等功能。

这些 API 在遇到异步任务时，会将任务委托给其他线程（例如，浏览器内核中的线程），当异步任务完成后，再通知 JavaScript 主线程。这个过程就是事件循环的核心。

2. 什么是调用栈（Call Stack）？

调用栈就像一个堆叠的盘子，每次调用一个函数，就会把函数压入栈中，函数执行完毕后，就会从栈中弹出。JavaScript 主线程每次执行的任务都是从调用栈中拿取的。

function foo() {
  console.log("foo called");
  bar();
}

function bar() {
  console.log("bar called");
}

foo();

在这个例子中，foo() 和 bar() 会依次被压入调用栈，bar() 执行完后弹出，然后 foo() 执行完弹出。

3. 任务队列（Task Queue）/ 回调队列（Callback Queue）

当异步任务（如 setTimeout、fetch）完成后，它们的回调函数不会立即进入调用栈，而是会被放入任务队列（也称为回调队列）。任务队列就像一个等待执行的函数列表。

任务队列分两种：

宏任务队列（Macrotask Queue）： 例如 setTimeout、setInterval、setImmediate (Node.js)、requestAnimationFrame (浏览器)、I/O 操作、UI rendering。
微任务队列（Microtask Queue）： 例如 Promise.then、async/await、queueMicrotask、MutationObserver。

4. 事件循环（Event Loop）的运作方式

事件循环就是不断地监控调用栈和任务队列，它的工作方式可以用以下伪代码来描述：

while (true) {
  // 1. 检查调用栈是否为空
  if (callStack.isEmpty()) {
    // 2. 如果调用栈为空，先检查微任务队列
    if (!microtaskQueue.isEmpty()) {
      //  从微任务队列中取出第一个任务并执行
      const microtask = microtaskQueue.shift();
      callStack.push(microtask);
      // 循环执行 微任务，直到微任务队列为空
      while(!microtaskQueue.isEmpty()){
          const microtask = microtaskQueue.shift();
          callStack.push(microtask);
      }
    }else{
      // 3. 如果微任务队列为空，再检查宏任务队列
       if (!macrotaskQueue.isEmpty()) {
        // 从宏任务队列中取出第一个任务并执行
        const macrotask = macrotaskQueue.shift();
        callStack.push(macrotask);
      }
    }

  }
}

简单来说，事件循环会：

检查调用栈： 看看调用栈是否为空。
优先检查微任务队列： 如果调用栈为空，则会先检查微任务队列，将队列中的所有微任务依次执行完毕，直到微任务队列为空。
执行宏任务队列： 然后检查宏任务队列，取出最老的宏任务到调用栈中执行。
重复执行： 不断循环以上步骤。

5. 代码示例：理解执行顺序

console.log('script start');

setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
      console.log('promise inside setTimeout')
  })
}, 0);

Promise.resolve().then(() => {
  console.log('promise 1');
});

Promise.resolve().then(() => {
  console.log('promise 2');
});


console.log('script end');

这段代码的执行顺序是：

script start
script end
promise 1
promise 2
setTimeout 1
promise inside setTimeout

解释：

首先，同步代码按顺序执行，输出 script start 和 script end。
Promise 的 then 回调放入微任务队列。
setTimeout 的回调放入宏任务队列。
当前同步代码执行完毕后，先清空微任务队列，输出 promise 1 和 promise 2。
然后，事件循环取出一个宏任务执行，即 setTimeout 的回调函数，输出 setTimeout 1, 之后遇到了微任务，放到微任务队列，循环检测，输出 promise inside setTimeout
最终，事件循环继续执行下一轮。

总结：

JavaScript 的事件循环机制是理解异步编程的关键。它通过调用栈、任务队列和事件循环之间的协作，实现了 JavaScript 的非阻塞执行。