本文旨在阐明javascript中`await`关键字的工作机制，特别是它如何与事件循环和微任务队列交互，并解析围绕“tick”这一术语在不同文档（如mdn和node.js）中存在的定义差异，这些差异常导致开发者对`await`执行时机产生混淆。文章将通过代码示例，详细分析`await`如何将后续代码推入微任务队列，以及微任务在当前事件循环迭代中的执行顺序，最终建议避免使用模糊的“tick”概念以增强理解的准确性。
在JavaScript中，async/await语法为处理异步操作提供了一种更同步、更易读的方式。async函数始终返回一个Promise，而await关键字只能在async函数内部使用，它会暂停async函数的执行，直到其等待的Promise解决。
根据MDN文档，当代码中遇到await表达式时，被等待的表达式会立即执行。然而，所有依赖于该表达式值的后续代码（即await语句之后的代码）将被暂停，并被推入微任务队列。这意味着await后的代码不会立即执行，而是会在当前同步任务完成后，但在下一个宏任务开始之前执行。
为了更好地理解这一点，我们来看两个示例：
示例 1: 不含 await 的 async 函数
立即学习“Java免费学习笔记（深入）”；
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操作，所有语句都在同一个“执行批次”内完成。
示例 2: 包含 await 的 async 函数
async function foo(name) {
console.log(name, "start");
await console.log(name, "middle"); // await 了一个非 Promise 值
console.log(name, "end");
}
foo("First");
foo("Second");
// 输出:
// First start
// First middle
// Second start
// Second middle
// First end
// Second end在这个例子中，await console.log(name, "middle")这一行改变了执行流程。当await遇到一个非Promise值时，它会立即将其解析为一个已解决的Promise，并将await后的代码（即console.log(name, "end")）放入微任务队列。
执行流程分析：
这清楚地展示了await如何将后续代码的执行推迟到当前同步任务完成后，但仍在同一事件循环迭代中处理微任务队列。
示例2的输出引发了一个关键问题：MDN文档中提到“执行后续语句被推迟到下一个tick”，但从实际观察和事件循环机制来看，微任务似乎是在同一个事件循环迭代中被处理的。这正是“tick”一词定义差异所带来的混淆。
在深入探讨“tick”之前，我们必须理解事件循环（Event Loop）和微任务队列（Microtask Queue）的核心概念：
1. MDN / HTML 标准的视角
MDN文档和HTML标准对事件循环的描述更侧重于通用性和粒度。它们通常定义事件循环的每次迭代如下：
当MDN提到await将执行推迟到“下一个tick”时，它可能将“tick”定义为更细粒度的执行单元。例如，初始的同步代码执行可能被视为一个“tick”，而随后的微任务队列处理则被视为另一个“tick”，即使它们发生在同一个事件循环迭代中。在这种语境下，一个Promise的.then()链中的每个回调，也可能被视为在不同的“tick”中执行，以强调它们不是同步一次性完成的。
2. Node.js 文档的视角
Node.js的事件循环模型则更为复杂和具体，它将事件循环的每次迭代细分为多个阶段（phases）：
┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ idle, prepare │ │ └─────────────┬─────────────┘ ┌───────────────┐ │ ┌─────────────┴─────────────┐ │ incoming: │ │ │ poll │<─────┤ connections, │ │ └─────────────┬─────────────┘ │ data, etc. │ │ ┌─────────────┴─────────────┐ └───────────────┘ │ │ check │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ └──┤ close callbacks │ └─────────────┬─────────────┘
Node.js文档中通常将一个完整的事件循环迭代称为一个“tick”。这意味着在一个“tick”（即一次完整迭代）中，会经历所有这些阶段，并且在每个阶段之间（或在特定阶段之后）会清空微任务队列。因此，从Node.js的宏观“tick”定义来看，await所产生的微任务确实是在同一个“tick”内被处理的。
Node.js中还有一个特殊的函数process.nextTick()，它的名称本身就带有“nextTick”字样，但其行为却与微任务队列紧密相关，甚至优先级更高。process.nextTick()的回调会在当前操作完成后，但在事件循环的任何阶段开始之前执行。它实际上是在微任务队列之前被处理的。这进一步加剧了“tick”一词的语义混乱。
从上述分析可以看出，你对await行为的理解是正确的：await会将后续代码推入微任务队列，而这些微任务会在当前事件循环的同一迭代中，在当前宏任务完成后、下一个宏任务开始前被执行。
造成“下一个tick”这一表述混淆的根本原因在于不同文档对“tick”一词的定义粒度不同。MDN可能在更细的粒度上将同步执行和微任务执行视为不同的“tick”，而Node.js则可能将一个完整的事件循环迭代视为一个“tick”。
为了避免这种语义上的混淆，建议在讨论异步执行时，尽量避免使用“tick”这个模糊的术语。 相反，更清晰、更准确的表达方式是：
明确指出await会将代码调度到微任务队列中，并且微任务会在当前事件循环迭代的当前宏任务执行完毕后立即执行，这样能够更准确地描述其行为，减少不必要的歧义。
理解await和事件循环的精确交互机制，对于编写高效、可预测的异步JavaScript代码至关重要。通过聚焦于微任务和事件循环迭代的概念，我们可以更好地掌握JavaScript的并发模型。
以上就是深入理解JavaScript await 行为与事件循环中的“Tick”概念的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
405
收藏
