一文带你了解Node事件循环中的计时器队列

image.png

在 上一篇文章 中,我们探讨了微任务队列及它在各队列中的优先级顺序。在本文,我们将讨论计时器队列,这是 Node.js中用于处理异步代码的另一个队列。

在深入研究计时器队列之前,让我们快速回顾一下微任务队列。为了将回调函数排入微任务队列,我们使用诸如 process.nextTick()Promise.resolve() 等函数。当涉及到执行 Node.js 中的异步代码时,微任务队列具有最高优先级。【相关教程推荐:nodejs视频教程、编程教学】

入队回调函数

现在我们转到计时器队列。要将回调函数排入计时器队列,我们可以使用 setTimeoutsetInterval等函数。为了方便说明,本文将使用 setTimeout

为了理解计时器队列的执行顺序,我们会进行一系列实验,在微任务队列和计时器队列中入队任务。

实验三

代码

// index.jssetTimeout(() => console.log("this is setTimeout 1"), 0);setTimeout(() => console.log("this is setTimeout 2"), 0);setTimeout(() => console.log("this is setTimeout 3"), 0);process.nextTick(() => console.log("this is process.nextTick 1"));process.nextTick(() => {  console.log("this is process.nextTick 2");  process.nextTick(() =>    console.log("this is the inner next tick inside next tick")  );});process.nextTick(() => console.log("this is process.nextTick 3"));Promise.resolve().then(() => console.log("this is Promise.resolve 1"));Promise.resolve().then(() => {  console.log("this is Promise.resolve 2");  process.nextTick(() =>    console.log("this is the inner next tick inside Promise then block")  );});Promise.resolve().then(() => console.log("this is Promise.resolve 3"));

译注:大家不用紧张,这段代码就是在上篇“福利实验”的基础上,在开头加了 3 个 setTimeout 语句。

该代码包含三个 process.nextTick() 的调用,三个 Promise.resolve() 的调用和三个 setTimeout 的调用。每个回调函数记录适当的消息。所有三个 setTimeout 调用都有 0ms 的延迟,这表示在执行每个 setTimeout 语句时,回调函数都立即入队到计时器队列等待。第二次 process.nextTick() 和第二次 Promise.resolve() 都有一个额外的 process.nextTick() 语句,并且每个都带有一个回调函数。

可视化

assets_YJIGb4i01jvw0SRdL5Bt_c4034ba006d840128b729005183abdf4_compressed.gif

当调用栈执行所有语句后,在 nextTick 队列中有 3 个回调,在 Promise 队列中有 3 个回调,在计时器队列中也有 3 个回调。没有代码要执行,控制权进入事件循环。

nextTick 队列具有最高优先级,其次是 Promise 队列,然后是计时器队列。从 nextTick 队列中获取第1 个回调并执行它,将一条消息记录到控制台。接着获取第 2 个回调并执行它,这也会记录一条消息。第 2 个回调包含 process.nextTick() 的调用,该方法将新的回调添加到了 nextTick 队列中。继续执行,并获取和执行第 3 个回调以及记录一条消息。最后,我们将新添加到 nextTick 队列的回调函数取出并在调用栈中执行,从而在控制台上输出了第四条日志信息。

当 nextTick 队列为空时,事件循环转向 Promise 队列。从队列中获取第 1 个回调,在控制台打印一条信息,第二个回调效果类似,并且还向 nextTick 队列添加了一个回调。 Promise 中的第 3 个回调被执行,接着日志消息被输出。此时 Promise 队列已空,事件循环检查 nextTick 队列是否存在新的回调,找到之后同样将消息记录到控制台。

现在,两个微任务队列都空了,事件循环转向计时器队列。我们有三个回调,每个回调依次从计时器队列中取出并在调用栈上执行,将分别打印 “setTimeout 1″、”setTimeout 2” 和 “setTimeout 3″。

this is process.nextTick 1this is process.nextTick 2this is process.nextTick 3this is the inner next tick inside next tickthis is Promise.resolve 1this is Promise.resolve 2this is Promise.resolve 3this is the inner next tick inside Promise then blockthis is setTimeout 1this is setTimeout 2this is setTimeout 3

推论

微任务队列中的回调函数会在定时器队列中的回调函数之前执行。

到目前为止,优先顺序是 nextTick 队列,其次是 Promise 队列,然后是定时器队列。现在让我们继续进行下一个实验。

实验四

// index.jssetTimeout(() => console.log("this is setTimeout 1"), 0);setTimeout(() => {  console.log("this is setTimeout 2");  process.nextTick(() =>    console.log("this is inner nextTick inside setTimeout")  );}, 0);setTimeout(() => console.log("this is setTimeout 3"), 0);process.nextTick(() => console.log("this is process.nextTick 1"));process.nextTick(() => {  console.log("this is process.nextTick 2");  process.nextTick(() =>    console.log("this is the inner next tick inside next tick")  );});process.nextTick(() => console.log("this is process.nextTick 3"));Promise.resolve().then(() => console.log("this is Promise.resolve 1"));Promise.resolve().then(() => {  console.log("this is Promise.resolve 2");  process.nextTick(() =>    console.log("this is the inner next tick inside Promise then block")  );});Promise.resolve().then(() => console.log("this is Promise.resolve 3"));

第四个实验的代码大部分与第三个相同,只有一个例外。传递给第二个 setTimeout 函数的回调函数现在包含 process.nextTick() 的调用。

小文AI论文 小文AI论文

轻松解决论文写作难题,AI论文助您一键完成,仅需一杯咖啡时间,即可轻松问鼎学术高峰!

小文AI论文 69 查看详情 小文AI论文

可视化

assets_YJIGb4i01jvw0SRdL5Bt_c4034ba006d840128b729005183abdf4_compressed (1).gif

让我们应用从之前的实验中学到的知识,快进到回调在微任务队列中已经被执行的点。假设我们有三个回调在计时器队列中排队等待。第一个回调出队并在调用堆栈上执行,“setTimeout 1”消息打印到控制台。事件循环继续运行第二个回调,“setTimeout 2”消息打印到控制台。同时,也会有一个回调函数入队了 nextTick 队列。

在执行计时器队列中的每个回调后,事件循环会返回检查微任务队列。检查 nextTick 队列确定需要执行的回调函数。这时第二个 setTimeout 推入的回调函数出队并在调用栈上执行,结果“inner nextTick”消息打印到控制台。

现在微任务队列为空了,控制权返回到计时器队列,最后一个回调被执行,控制台上显示消息“setTimeout 3”。

this is process.nextTick 1this is process.nextTick 2this is process.nextTick 3this is the inner next tick inside next tickthis is Promise.resolve 1this is Promise.resolve 2this is Promise.resolve 3this is the inner next tick inside Promise then blockthis is setTimeout 1this is setTimeout 2this is inner nextTick inside setTimeoutthis is setTimeout 3

推论

微任务队列中的回调函数会在定时器队列中的回调函数执行之间被执行。

实验五

代码

// index.jssetTimeout(() => console.log("this is setTimeout 1"), 1000);setTimeout(() => console.log("this is setTimeout 2"), 500);setTimeout(() => console.log("this is setTimeout 3"), 0);

该代码包含三个 setTimeout 语句,包含三个不同的、入队时机不一样的回调函数。第一个 setTimeout 延迟 1000 毫秒,第二个延迟 500 毫秒,第三个延迟 0 毫秒。当执行这些回调函数时,它们只是简单地将一条消息记录到控制台中。

可视化

由于代码片段的执行非常简单,因此我们将跳过可视化实验。当多个 setTimeout 调用被发出时,事件循环首先排队最短延迟的一个并在其他之前执行。结果,我们观察到“setTimeout 3”先执行,然后是“setTimeout 2”,最后是“setTimeout 1”。

this is setTimeout 3this is setTimeout 2this is setTimeout 1

推论

计时器队列回调按照先进先出(FIFO)的顺序执行。

总结

实验表明,微任务队列中的回调比定时器队列中的回调具有更高优先级,并且微任务队列中的回调在定时器队列中的回调之间执行。定时器队列遵循先进先出(FIFO)顺序。

原文链接:Visualizing The Timer Queue in Node.js Event Loop,2023年4月4日,by Vishwas Gopinath

更多node相关知识,请访问:nodejs 教程!

以上就是一文带你了解Node事件循环中的计时器队列的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/541728.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 15:35:45
下一篇 2025年11月9日 15:37:17

相关推荐

  • 为什么前端固定定位会发生移动问题?

    前端固定定位为什么会出现移动现象? 在进行前端开发时,我们经常会使用CSS中的position属性来控制元素的定位。其中,固定定位(position: fixed)是一种常用的定位方式,它可以让元素相对于浏览器窗口进行定位,保持在页面的固定位置不动。 然而,有时候我们会遇到一个问题:在使用固定定位时…

    2025年12月24日
    000
  • 从初学到专业:掌握这五种前端CSS框架

    CSS是网站设计中重要的一部分,它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用,通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架,从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发,具有可定制的响应式网格系统、…

    2025年12月24日
    200
  • 克服害怕做选择的恐惧症:这五个前端CSS框架将为你解决问题

    选择恐惧症?这五个前端CSS框架能帮你解决问题 近年来,前端开发者已经进入了一个黄金时代。随着互联网的快速发展,人们对于网页设计和用户体验的要求也越来越高。然而,要想快速高效地构建出漂亮的网页并不容易,特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是,前端开发者们早已为我们准备好了一些CSS…

    2025年12月24日
    200
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • is与where选择器:提升前端编程效率的秘密武器

    is与where选择器:提升前端编程效率的秘密武器 在前端开发中,选择器是一种非常重要的工具。它们用于选择文档中的元素,从而对其进行操作和样式设置。随着前端技术的不断发展,选择器也在不断演化。而其中,is与where选择器成为了提升前端编程效率的秘密武器。 is选择器是CSS Selectors L…

    2025年12月24日
    000
  • 前端技巧分享:使用CSS3 fit-content让元素水平居中

    前端技巧分享:使用CSS3 fit-content让元素水平居中 在前端开发中,我们常常会遇到需要将某个元素水平居中的情况。使用CSS3的fit-content属性可以很方便地实现这个效果。本文将介绍fit-content属性的使用方法,并提供代码示例。 fit-content属性是一个相对于元素父…

    2025年12月24日
    000
  • 前端技术分享:利用fit-content实现页面元素的水平对齐效果

    前端技术分享:利用fit-content实现页面元素的水平对齐效果 在前端开发中,实现页面元素的水平对齐是一个常见的需求。尤其在响应式布局中,我们经常需要让元素根据设备的屏幕大小自动调整位置,使页面更加美观和易读。在本文中,我将分享一种利用CSS属性fit-content来实现页面元素的水平对齐效果…

    2025年12月24日
    000
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 13 个实用CSS技巧,助你提升前端开发效率!

    本篇文章整理分享13 个前端可能用得上的 css技巧,包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等,希望对大家有所帮助! 修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,…

    2025年12月24日
    000
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 聊聊CSS中怎么让auto height支持过渡动画

    css如何让auto height完美支持过渡动画?下面本篇文章带大家聊聊css中让auto height支持过渡动画的方法,希望对大家有所帮助! 众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 div{ height: 0; transition: 1…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(一)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

    2025年12月24日 好文分享
    300
  • 看看这些前端面试题,带你搞定高频知识点(二)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

    2025年12月24日 好文分享
    200
  • 看看这些前端面试题,带你搞定高频知识点(三)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(四)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(五)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • CSS flex布局属性:align-items和align-content的区别

    在用flex布局时,发现有两个属性功能好像有点类似:align-items和align-content,乍看之下,它们都是用于定义flex容器中元素在交叉轴(主轴为flex-deriction定义的方向,默认为row,那么交叉轴跟主轴垂直即为column,反之它们互调,flex基本的概念如下图所示)…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信