本文旨在阐明javascript中`await`关键字的工作机制，特别是它如何与事件循环和微任务队列交互，并解析围绕“tick”这一术语在不同文档（如mdn和node.js）中存在的定义差异，这些差异常导致开发者对`await`执行时机产生混淆。文章将通过代码示例，详细分析`await`如何将后续代码推入微任务队列，以及微任务在当前事件循环迭代中的执行顺序，最终建议避免使用模糊的“tick”概念以增强理解的准确性。
await 关键字与异步流控制
在JavaScript中，async/await语法为处理异步操作提供了一种更同步、更易读的方式。async函数始终返回一个Promise，而await关键字只能在async函数内部使用，它会暂停async函数的执行，直到其等待的Promise解决。
await 的基本行为
根据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”)）放入微任务队列。
执行流程分析：
foo(“First”)被调用。console.log(“First”, “start”)执行并输出。await console.log(“First”, “middle”)执行：console.log(“First”, “middle”)执行并输出。await操作将foo(“First”)中剩余的代码（console.log(“First”, “end”)）推入微任务队列。foo(“First”)函数暂停。foo(“Second”)被调用。console.log(“Second”, “start”)执行并输出。await console.log(“Second”, “middle”)执行：console.log(“Second”, “middle”)执行并输出。await操作将foo(“Second”)中剩余的代码（console.log(“Second”, “end”)）推入微任务队列。foo(“Second”)函数暂停。当前同步代码执行完毕。事件循环开始处理微任务队列。从队列中取出第一个微任务（foo(“First”)的console.log(“First”, “end”)）并执行。从队列中取出第二个微任务（foo(“Second”)的console.log(“Second”, “end”)）并执行。
这清楚地展示了await如何将后续代码的执行推迟到当前同步任务完成后，但仍在同一事件循环迭代中处理微任务队列。
“Tick”的语义困境：MDN vs. Node.js
示例2的输出引发了一个关键问题：MDN文档中提到“执行后续语句被推迟到下一个tick”，但从实际观察和事件循环机制来看，微任务似乎是在同一个事件循环迭代中被处理的。这正是“tick”一词定义差异所带来的混淆。
事件循环与微任务队列
在深入探讨“tick”之前，我们必须理解事件循环（Event Loop）和微任务队列（Microtask Queue）的核心概念：
事件循环（Event Loop）：是JavaScript运行时环境（浏览器或Node.js）中一个持续运行的进程，它负责协调任务的执行。它不断地检查任务队列，并按照特定顺序执行任务。任务队列（Task Queue / Macrotask Queue）：包含宏任务，如setTimeout、setInterval、I/O操作、UI渲染等。在每次事件循环迭代中，通常只处理一个宏任务。微任务队列（Microtask Queue）：包含微任务，如Promise的回调（.then()、.catch()、.finally()）、async/await的后续代码、MutationObserver的回调等。微任务会在当前宏任务执行完毕后，但在下一个宏任务开始之前，被全部清空并执行。
不同的“Tick”定义
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”内被处理的。
process.nextTick() 的特殊性
Node.js中还有一个特殊的函数process.nextTick()，它的名称本身就带有“nextTick”字样，但其行为却与微任务队列紧密相关，甚至优先级更高。process.nextTick()的回调会在当前操作完成后，但在事件循环的任何阶段开始之前执行。它实际上是在微任务队列之前被处理的。这进一步加剧了“tick”一词的语义混乱。
结论与最佳实践
从上述分析可以看出，你对await行为的理解是正确的：await会将后续代码推入微任务队列，而这些微任务会在当前事件循环的同一迭代中，在当前宏任务完成后、下一个宏任务开始前被执行。
造成“下一个tick”这一表述混淆的根本原因在于不同文档对“tick”一词的定义粒度不同。MDN可能在更细的粒度上将同步执行和微任务执行视为不同的“tick”，而Node.js则可能将一个完整的事件循环迭代视为一个“tick”。
为了避免这种语义上的混淆，建议在讨论异步执行时，尽量避免使用“tick”这个模糊的术语。 相反，更清晰、更准确的表达方式是：
事件循环迭代（Event Loop Iteration）：指事件循环从开始处理任务到再次循环的完整过程。宏任务（Macrotask）：如setTimeout、I/O等。微任务（Microtask）：如Promise回调、await后续代码等。
明确指出await会将代码调度到微任务队列中，并且微任务会在当前事件循环迭代的当前宏任务执行完毕后立即执行，这样能够更准确地描述其行为，减少不必要的歧义。
理解await和事件循环的精确交互机制，对于编写高效、可预测的异步JavaScript代码至关重要。通过聚焦于微任务和事件循环迭代的概念，我们可以更好地掌握JavaScript的并发模型。
以上就是深入理解JavaScript await 行为与事件循环中的“Tick”概念的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540996.html
微信扫一扫 
支付宝扫一扫 
