0

0

JavaScript await 行为与事件循环中的 ‘Tick’ 概念辨析

聖光之護

聖光之護

发布时间:2025-12-12 19:52:02

|

934人浏览过

|

来源于php中文网

原创

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表达式本身会立即执行,但其后的代码会等待当前同步代码执行完毕后,在同一事件循环迭代的微任务阶段被执行。

立即学习Java免费学习笔记(深入)”;

考虑以下包含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. 事件循环的“迭代”或“阶段”

MagickPen
MagickPen

在线AI英语写作助手,像魔术师一样在几秒钟内写出任何东西。

下载
  • 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异步代码至关重要。始终记住,微任务总是优先于下一个宏任务执行,这确保了异步操作的及时响应性。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

397

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

575

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

514

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

298

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5309

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

481

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

212

2023.09.04

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

1

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号