JavaScript中的事件循环机制是如何影响代码执行顺序的?

同步代码先执行,微任务优先于宏任务。JavaScript 通过事件循环协调任务:同步任务入执行;异步任务分微任务(如 Promise.then)和宏任务(如 setTimeout)进入对应队列;同步执行完后,先清空微任务队列,再取宏任务执行。例如 console.log(‘1’)、setTimeout、Promise.then、console.log(‘4’) 的输出顺序为 1 → 4 → 3 → 2,因 ‘1’ 和 ‘4’ 同步执行,Promise 回调为微任务,在本轮末尾执行,setTimeout 为宏任务延至下轮执行。事件循环持续检查调用栈,清空微任务后执行宏任务,如此反复。掌握此机制是理解 JS 异步关键。

javascript中的事件循环机制是如何影响代码执行顺序的?

JavaScript 是单线程语言,依靠事件循环(Event Loop)机制来协调代码的执行顺序,特别是在处理异步操作时。它决定了同步代码、异步回调、微任务和宏任务的执行优先级。

同步代码优先执行

JavaScript 会按代码书写顺序立即执行所有同步任务。这些任务运行在主线程上,形成调用栈,逐个完成。

例如:

    console.log('A');
console.log('B');

输出顺序一定是 A → B,因为它们是同步代码,直接入栈执行。

异步任务进入任务队列

当遇到异步操作(如 setTimeoutsetIntervalPromise.thenfetch 等),它们不会立即执行,而是被放入不同的任务队列中等待处理。

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

事件循环持续检查调用栈是否为空。一旦空闲,就开始从队列中取出任务执行。

宏任务(Macrotask):包括 setTimeoutsetInterval、I/O、UI 渲染等。 微任务(Microtask):包括 Promise.then/catch/finallyqueueMicrotaskMutationObserver 等。

微任务优先于宏任务执行

每次同步代码执行完毕后,事件循环会先清空当前所有的微任务队列,再执行下一个宏任务。

看一个典型例子:

    console.log('1');

setTimeout(() => {
console.log('2');
}, 0);

Promise.resolve().then(() => {
console.log('3');
});

console.log('4');

输出结果是:1 → 4 → 3 → 2

说明:

‘1’ 和 ‘4’ 是同步代码,最先输出。 Promise 的 then 回调是微任务,在本轮事件循环末尾执行。 setTimeout 是宏任务,要等到下一轮事件循环才执行。

事件循环的工作流程总结

整个执行流程可以概括为:

执行全局同步代码,产生执行栈。 异步任务被挂起,对应的回调进入相应队列(微任务或宏任务)。 同步代码执行完,调用栈清空。 立即执行所有当前可用的微任务。 取一个宏任务执行(如 setTimeout 回调),然后再次清空微任务队列。 重复以上过程。

基本上就这些。理解微任务先于宏任务执行,是掌握 JavaScript 异步行为的关键。不复杂但容易忽略。

以上就是JavaScript中的事件循环机制是如何影响代码执行顺序的?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何利用RequestAnimationFrame优化动画性能,以及它与setTimeout在渲染调度上的区别是什么?
上一篇 2025年12月20日 21:12:50
JavaScript中的BigInt如何解决大整数运算问题?
下一篇 2025年12月20日 21:13:04

相关推荐

  • sublime怎么用快捷键关闭当前文件_sublime关闭标签页快捷操作

    sublime怎么用快捷键关闭当前文件_sublime关闭标签页快捷操作sublime怎么用快捷键关闭当前文件_sublime关闭标签页快捷操作sublime怎么用快捷键关闭当前文件_sublime关闭标签页快捷操作sublime怎么用快捷键关闭当前文件_sublime关闭标签页快捷操作

    答案是Ctrl+W(Windows/Linux)或Cmd+W(Mac)关闭当前标签页,前者适用于Windows和Linux系统,后者适用于macOS系统,符合各自平台操作习惯,可高效管理编辑界面。 在 Sublime Text 中关闭当前文件(即关闭标签页)可以通过快捷键快速完成,操作简单高效。 W…

    2026年9月24日 用户投稿
    000
  • 怎么在mysql中创建一个表 mysql新建数据表步骤教程

    在 mysql 中创建表的步骤和建议包括:1. 明确业务需求,设计表结构;2. 使用 create table 语句创建表,选择合适的数据类型和设置主键、索引;3. 考虑大数据量时使用分区;4. 设置正确的字符集和排序规则;5. 谨慎使用索引;6. 使用 if not exists 避免重复创建表。…

    2026年9月24日
    100
  • Spring Boot @Nested 测试中属性覆盖与隔离策略

    Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略

    本文深入探讨了在Spring Boot集成测试中,如何利用@Nested注解结合@TestPropertySource实现细粒度的属性配置和隔离。通过详细的示例代码,展示了外部测试类和嵌套测试类如何定义各自的属性集,以及这些属性在不同测试上下文中的继承与覆盖机制,从而确保测试环境的精确控制和独立性。…

    2026年9月24日 用户投稿
    100
  • sublime怎么安装字体并应用_sublime更换与应用新字体方法

    sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法

    先在操作系统安装字体文件,再通过Sublime Text设置中的font_face指定字体名称即可应用。1. 将.ttf或.otf字体文件安装到系统:Windows右键安装,macOS双击后点击“安装字体”,Linux复制到~/.fonts并运行fc-cache -fv更新缓存。2. 重启Subli…

    2026年9月24日 用户投稿
    000
  • 漫客栈免费登录网页_漫客栈官方网站漫画入口

    漫客栈免费登录网页_漫客栈官方网站漫画入口漫客栈免费登录网页_漫客栈官方网站漫画入口漫客栈免费登录网页_漫客栈官方网站漫画入口漫客栈免费登录网页_漫客栈官方网站漫画入口

    漫客栈免费登录网页入口是https://www.mankezhan.com/,该平台提供海量原创漫画资源,涵盖多种题材,支持多端阅读、离线下载与互动评论,阅读体验良好。 漫客栈免费登录网页入口地址在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来漫客栈官方网站漫画入口,感兴趣的网友一起随小编…

    2026年9月24日 用户投稿
    200
  • Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法

    Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法

    可通过清除浏览数据、手动删除特定条目或重启浏览器清理“最近关闭的标签页”列表。 如果您在使用Chrome浏览器时希望清理“最近关闭的标签页”列表,以保护隐私或整理浏览历史,可以通过以下多种方法进行操作。 本文运行环境:MacBook Pro,macOS Sonoma 一、清除全部浏览数据以移除最近关…

    2026年9月24日 用户投稿
    000
  • Android应用中通过下载链接从Firebase Storage下载文件教程

    Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程

    本教程详细介绍了在Android应用中如何利用文件的下载URL,结合Android DownloadManager将Firebase Storage中的文件下载到用户设备指定目录。内容涵盖必要的运行时权限处理、清单文件配置以及DownloadManager的具体使用方法,旨在帮助开发者实现本地文件存…

    2026年9月24日 用户投稿
    300
  • Chrome浏览器书签栏怎么一直显示_设置Chrome书签栏永久显示教程

    Chrome浏览器书签栏怎么一直显示_设置Chrome书签栏永久显示教程Chrome浏览器书签栏怎么一直显示_设置Chrome书签栏永久显示教程Chrome浏览器书签栏怎么一直显示_设置Chrome书签栏永久显示教程Chrome浏览器书签栏怎么一直显示_设置Chrome书签栏永久显示教程

    通过点击Chrome右上角三点菜单,选择“书签”>“显示书签栏”可恢复书签栏;2. 使用Ctrl+Shift+B(Windows)或Command+Shift+B(Mac)快捷键快速切换显示;3. 在设置页面的“外观”中确保“显示书签栏”设为“始终显示”;4. 若无效,可重置浏览器设置以恢复默…

    2026年9月24日 用户投稿
    000
  • sublime的session文件是做什么用的_sublime会话文件作用与恢复机制

    sublime的session文件是做什么用的_sublime会话文件作用与恢复机制sublime的session文件是做什么用的_sublime会话文件作用与恢复机制sublime的session文件是做什么用的_sublime会话文件作用与恢复机制sublime的session文件是做什么用的_sublime会话文件作用与恢复机制

    Sublime Text的session文件记录了打开的文件、光标位置、代码折叠状态、窗口布局及未保存内容等信息,位于系统特定目录下的Local文件夹中,以JSON格式存储,通过自动保存机制在重启后恢复编辑状态。 Sublime Text 的 session 文件主要用于保存用户当前编辑环境的状态信…

    2026年9月24日 用户投稿
    000
  • Java中双精度浮点数的小数位控制技巧

    Java中双精度浮点数的小数位控制技巧Java中双精度浮点数的小数位控制技巧Java中双精度浮点数的小数位控制技巧Java中双精度浮点数的小数位控制技巧

    本文深入探讨了在Java中有效控制double类型数值小数位数的方法。通过Math.round()函数结合乘除操作,可以实现数值本身的四舍五入并改变其精度;而String.format()则提供了灵活的字符串格式化功能,用于在不修改原始数值的情况下精确控制显示的小数位数。这两种方法分别适用于不同的业…

    2026年9月24日 用户投稿
    100
  • 为什么GPU显存带宽比容量更重要?

    显存带宽比容量更重要,因其直接决定数据传输速度,影响GPU计算单元的利用率。在AI训练和高分辨率渲染中,高带宽可避免“数据饥饿”,确保海量数据高效流转,而HBM技术凭借3D堆叠和宽接口提供远超GDDR的带宽,成为高性能计算的关键。 GPU显存带宽比容量更重要,核心在于现代GPU的工作模式和其处理的数…

    2026年9月24日
    200
  • Java语法基础中static关键字可以修饰哪些内容

    static关键字用于定义类成员,包括静态变量(如计数器)、静态方法(如工具方法)、静态代码块(类加载时执行)和静态内部类(不依赖外部类实例),均属于类而非对象,通过类名访问,提升成员至类级别实现共享与提前使用。 static 关键字在 Java 中主要用于定义与类相关而非与对象实例相关的成员。它不…

    2026年9月24日
    200
  • mysql中*是什么意思 mysql星号通配符解析

    在 mysql 中,星号()最常用于 select 语句中代表所有列,但应谨慎使用。1)它方便查看所有数据,但可能返回不必要的数据,影响性能。2)使用可能降低代码可维护性,建议明确列出所需列。3)在like操作符中,不是通配符,需用regexp。4)在视图中使用可能导致定义失效。5)可结合limit…

    2026年9月24日
    100
  • mac怎么合并访达窗口_mac Finder窗口合并技巧

    可通过“窗口”菜单中的“合并所有窗口”命令将多个访达窗口整合为标签页;2. 也可手动拖动窗口标题栏至另一窗口顶部标签栏以创建标签页;3. 结合Control+上箭头进入台前调度,可辅助分组管理并优化多窗口操作体验。 如果您在使用Mac时打开了多个“访达”窗口,导致桌面显得杂乱,可以通过合并窗口的方式…

    2026年9月24日
    000
  • windows怎么关闭cortana进程_彻底关闭小娜(cortana)后台进程的方法

    1、可通过任务管理器结束Cortana进程并禁用其启动项;2、修改注册表或组策略可永久关闭;3、重命名系统目录文件夹可阻止其运行。 如果您发现Windows系统中Cortana(小娜)后台进程占用资源或影响系统性能,可能是该服务在后台持续运行。以下是彻底关闭Cortana进程的操作步骤: 本文运行环…

    2026年9月24日
    800
  • 苹果过时产品名单更新,M5 iPad Pro 开箱视频流出

    苹果过时产品名单更新,M5 iPad Pro 开箱视频流出苹果过时产品名单更新,M5 iPad Pro 开箱视频流出苹果过时产品名单更新,M5 iPad Pro 开箱视频流出苹果过时产品名单更新,M5 iPad Pro 开箱视频流出

    日前,苹果已将 iphone 11 pro max 和 apple watch series 3 的所有型号列入“过时产品”(vintage product)行列。 根据苹果的规定,一款产品在停止销售满 5 年后,可能会被归为“过时产品”。不过,这一分类并不会显著影响售后服务——苹果仍会继续为这些设…

    2026年9月24日 用户投稿
    600
  • Java语法基础中如何导入其他包中的类

    使用import关键字可导入其他包中的类,如import java.util.ArrayList;2. 通过import java.util.*可导入整个包;3. 不导入时可用全限定名访问类,但不推荐;4. 类名冲突时需使用全限定名区分,如java.sql.Date。 在Java中使用其他包中的类,…

    2026年9月24日
    1200
  • laravel怎么在模型中定义远程一对一或一对多关系_laravel模型远程关联定义方法

    使用 hasManyThrough 和 hasOneThrough 可在 Laravel 中实现通过中间模型访问远端数据,需确保外键正确或自定义键名以维持关联完整性。 如果您需要在 Laravel 模型中访问通过中间模型关联的远端数据,但两个模型之间没有直接关系,而是通过第三个模型连接,则可以使用“…

    2026年9月24日
    000
  • MAC系统怎么开启防火墙_MAC开启防火墙教程

    1、建议在Mac系统中开启防火墙以提升网络安全,可通过“系统设置”中的“网络-防火墙”选项启用;2、高级用户可使用终端命令sudo /usr/libexec/ApplicationFirewall/socketfilterfw –setglobalstate on开启服务;3、启用后可在…

    2026年9月24日
    100
  • VSCode的扩展设置是全局的还是局部的?

    VSCode扩展设置默认全局生效,存储于用户配置文件中,但部分扩展如ESLint、Prettier和Python支持项目级局部配置,通过在项目根目录的.vscode/settings.json文件中定义,可覆盖全局设置;在设置界面中,齿轮图标表示可被工作区覆盖,锁图标表示仅限全局修改,用户可根据需求…

    2026年9月24日
    200

发表回复

登录后才能评论
关注微信