0

0

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

夢幻星辰

夢幻星辰

发布时间:2025-10-14 18:15:01

|

837人浏览过

|

来源于php中文网

原创

同步代码先执行,微任务优先于宏任务。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');<br>
    console.log('B');
  

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

异步任务进入任务队列

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

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

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

Nanonets
Nanonets

基于AI的自学习OCR文档处理,自动捕获文档数据

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

微任务优先于宏任务执行

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

看一个典型例子:

    console.log('1');<br><br>
    setTimeout(() => {<br>
        console.log('2');<br>
    }, 0);<br><br>
    Promise.resolve().then(() => {<br>
        console.log('3');<br>
    });<br><br>
    console.log('4');
  

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

说明:

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

事件循环的工作流程总结

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

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

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

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

443

2023.07.18

堆和栈区别
堆和栈区别

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

605

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

765

2023.08.10

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

765

2023.08.10

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

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

531

2023.06.20

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

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

576

2023.07.28

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

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

760

2023.08.03

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

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

6231

2023.08.17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

1

2026.03.13

热门下载

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

精品课程

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

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

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

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