跳到主要内容

WTF JavaScript 极简教程 23. 事件循环

WTF JavaScript 教程，帮助新人快速入门 JavaScript。

推特：@WTFAcademy_ ｜ @0xAA_Science

WTF Academy 社群： 官网 wtf.academy | WTF Solidity 教程 | discord | 微信群申请

所有代码和教程开源在 github: github.com/WTFAcademy/WTF-Javascript

尽管 JavaScript 是单线程的编程语言，但是它可以通过事件循环机制处理并发操作，使 JavaScript 能够进行异步处理。JavaScript 将代码分为同步任务和异步任务，通过事件循环，异步任务在等待（如网络请求）期间不会阻塞主线程，可以同时执行其他任务。

调用栈和任务队列​

在我们深入研究事件循环之前，我们需要理解以下两个概念：

  • 调用栈（Call Stack）：JavaScript只有一个调用栈，用于在代码执行时跟踪函数调用的位置。当函数被调用时，它被添加到堆栈的顶部。当函数返回时，它从堆栈中被移除。同步任务会直接进入调用栈。

  • 任务队列（Task Queue）：当异步任务（如setTimeout或fetch）完成时，它们的回调函数被添加到任务队列中。如果调用栈为空，事件循环会将这些回调函数一个接一个地移到调用栈中以便执行。

宏任务和微任务​

在 JavaScript 的事件循环机制中，任务被分为两种类型：宏任务和微任务。

  • 宏任务（Macrotask）：由 JavaScript 引擎线程直接执行的任务，包括整个脚本（main script），setTimeout 和 setInterval 的回调，setImmediate（Node.js环境）等。

  • 微任务（Microtask）：微任务是在当前宏任务结束后立即执行的任务，包括 Promise 的 then 和 catch 的回调，process.nextTick（Node.js环境），MutationObserver的回调（浏览器环境）等。

事件循环过程​

事件循环的过程可以简化为以下

几个步骤：

  1. 从宏任务队列中取出一个任务来执行。
  2. 执行完这个任务后，执行所有的微任务。
  3. 当微任务队列清空后，进入下一次事件循环，执行下一个宏任务。

来看一个例子，展示了宏任务和微任务的执行顺序：

console.log('script start');  // Macrotask

setTimeout(function() {
  console.log('setTimeout');  // Macrotask
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');  // Microtask
}).then(function() {
  console.log('promise2');  // Microtask
});

console.log('script end');  // Macrotask

上述代码的输出顺序为：

script start
script end
promise1
promise2
setTimeout

解释：

  1. 首先，代码执行到console.log('script start')，输出 "script start"。
  2. 然后，遇到setTimeout，将其回调函数推入宏任务队列中。
  3. 接着，遇到Promise.resolve().then()，将第一个then回调函数推入微任务队列中。
  4. 继续执行，遇到第二个then回调函数，将其推入微任务队列中。
  5. 执行到console.log('script end')，输出 "script end"。
  6. 当前宏任务（script主线程代码）执行完毕，事件循环开始处理微任务队列，按顺序执行微任务。
  7. 执行第一个微任务，输出 "promise1"。
  8. 执行第二个微任务，输出 "promise2"。
  9. 微任务执行完毕，事件循环开始处理下一个宏任务。
  10. 从宏任务队列中取出setTimeout的回调函数，输出 "setTimeout"。

建议你在 jsv9000 网站上体验一下事件循环的可视化，可以更直观的理解事件循环的过程。

总结​

在这一讲，我们深入学习了 JavaScript 中的事件循环，包括宏任务和微任务。这是理解 JavaScript 异步编程的基础，能帮助我们更好地理解和控制代码的执行顺序。