JavaScriptawait与事件循环区别详解

一分耕耘，一分收获！既然都打开这篇《JavaScript await 与事件循环 Tick 的区别解析》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

本文深入探讨了JavaScript中`await`关键字的工作机制，特别是在事件循环和微任务调度方面的行为。我们将解析`await`如何暂停异步函数执行并将后续代码推入微任务队列，并阐明微任务在当前事件循环迭代中被处理的原理。文章还将辨析MDN和Node.js文档中对“tick”概念的不同定义所导致的混淆，强调理解微任务队列在异步编程中的关键作用。

理解 async/await 的基本行为

async/await 是 JavaScript 中处理异步操作的语法糖，它使得异步代码能够以同步的、更易读的方式编写。一个async函数总是返回一个Promise。当函数内部遇到await表达式时，它会暂停执行，直到await后面的Promise解决（resolved）或拒绝（rejected）。

首先，我们来看一个不包含await的async函数示例：

async function foo(name) {
  console.log(name, "start");
  console.log(name, "middle");
  console.log(name, "end");
}

foo("First");
foo("Second");

// 预期输出：
// First start
// First middle
// First end
// Second start
// Second middle
// Second end

在这个例子中，尽管foo是一个async函数，但由于它内部没有await表达式，其行为与同步函数无异。两个foo函数的调用会顺序执行，所有console.log语句都在当前事件循环的同一“tick”内完成。

await 引入异步行为

当async函数中包含await表达式时，情况就变得不同了。await会暂停当前async函数的执行，并将该函数中await之后的代码推入微任务队列。这意味着await表达式本身会立即执行，但其后的代码会等待当前同步代码执行完毕后，在同一事件循环迭代的微任务阶段被执行。

考虑以下包含await的示例：

async function foo(name) {
  console.log(name, "start");
  await console.log(name, "middle"); // 注意：await 后面是一个立即执行的表达式
  console.log(name, "end");
}

foo("First");
foo("Second");

// 预期输出：
// First start
// First middle
// Second start
// Second middle
// First end
// Second end

在这个例子中，当foo("First")执行到await console.log("First", "middle")时：

1. console.log("First", "middle")会立即执行并输出。
2. await关键字使得foo("First")函数的剩余部分（即console.log("First", "end")）被暂停，并作为一个微任务被添加到微任务队列中。
3. 程序继续执行foo("Second")。
4. foo("Second")也以类似方式执行，console.log("Second", "middle")立即输出，其剩余部分（console.log("Second", "end")）作为另一个微任务被添加到微任务队列。
5. 所有同步代码执行完毕后，事件循环开始处理微任务队列。此时，console.log("First", "end")被取出执行，然后console.log("Second", "end")被取出执行。

因此，输出的顺序展示了await如何将函数的执行拆分，并在微任务队列中进行调度。

“Tick” 概念的混淆与澄清

关于await后的代码是否在“下一个tick”执行的疑问，主要源于不同文档对“tick”一词定义的差异。

1. 事件循环的“迭代”或“阶段”

• Node.js 的定义： Node.js 文档将事件循环定义为一系列阶段（timers, pending callbacks, poll, check, close callbacks），一个完整的循环迭代被视为一个“tick”。在这个宽泛的“tick”内，会执行许多计划好的回调，包括来自微任务队列的回调。setImmediate()会在“下一个迭代或‘tick’”触发，这里“tick”指一个完整的事件循环周期。
• MDN/HTML Standard 的定义： HTML标准和MDN文档通常更通用地描述事件循环。一个事件循环迭代会选择并执行至多一个宏任务（task），然后处理所有待处理的微任务，最后可能进行渲染和绘制，然后再次循环。

2. “Tick”作为“单个回调的执行”

MDN 在某些上下文中，例如讨论Promise链时，会将“tick”理解为引擎启动一个Promise .then()回调，或者更广泛地指从任何队列中调用一个回调。例如，在一个Promise链中，每个.then()回调可能被描述为在“一个单独的tick”中执行，以强调它们是异步的且按顺序处理的。

myPromise
  .then((value) => `${value} and bar`) // 这是一个“tick”
  .then((value) => `${value} and bar again`) // 这是另一个“tick”
  // ...

这种定义使得“多个tick”才能执行完一个Promise链，与Node.js中一个“tick”包含所有微任务的理解形成对比。

3. process.nextTick() 的特殊性

在Node.js环境中，process.nextTick()函数调度一个回调，这个回调的队列会在当前事件循环迭代中，甚至在微任务队列（Promise回调、await后续代码）之前被处理。这进一步说明了“tick”这个词在不同语境下的含义复杂性。

结论与建议

你的理解是正确的：await关键字后的代码（被推入微任务队列的部分）确实是在当前事件循环的同一迭代中执行的，而不是在“下一个事件循环迭代”（宏任务）中。微任务队列会在当前宏任务执行完毕后，但在事件循环进入下一个宏任务之前被完全清空。

造成混淆的根本原因是“tick”这个词在不同上下文和不同文档（MDN、Node.js）中被赋予了不同的含义。为了避免这种歧义，建议在讨论事件循环和异步调度时，尽量避免使用“tick”这个词，而是使用更精确的术语，如：

• 事件循环迭代 (Event Loop Iteration)： 指事件循环从头到尾执行一次所有阶段的过程。
• 宏任务队列 (Task Queue)： 存储像setTimeout、setInterval、I/O等回调的队列。
• 微任务队列 (Microtask Queue)： 存储像Promise .then()/.catch()/.finally()、async/await后续代码、queueMicrotask等回调的队列。
• 当前执行栈 (Current Execution Stack)： 正在同步执行的代码。

理解await如何利用微任务队列来调度异步操作，对于编写高效且可预测的JavaScript异步代码至关重要。始终记住，微任务总是优先于下一个宏任务执行，这确保了异步操作的及时响应性。

以上就是《JavaScriptawait与事件循环区别详解》的详细内容，更多关于的资料请关注golang学习网公众号！