讲师中心 微信公众号
AI工具推荐 视频效率加速

什么是JavaScript异步编程与事件循环【教程】

云宇小哥_2322

云宇小哥_2322

发布时间:2026-01-18 18:39:08

|

623人浏览过

|

来源于php中文网

原创

JavaScript异步编程基于事件循环,宏任务(如setTimeout)在下一轮执行,微任务(如Promise.then)在本轮末尾清空;setTimeout(0)不立即执行因需等待同步代码和微任务完成,输出顺序为1 4 3 2。

什么是javascript异步编程与事件循环【教程】

JavaScript 异步编程不是“等它做完再往下走”,而是“告诉它干啥,然后继续干别的,等它干完再回头处理结果”。事件循环(Event Loop)就是那个盯着任务队列、决定什么时候执行回调的调度员——它不神秘,但错位理解会导致 setTimeout 不准、Promise 链行为反直觉、甚至 UI 卡死。

为什么 setTimeout(0) 不会立刻执行

因为 setTimeout 的回调被放进**宏任务队列(macrotask queue)**,而当前同步代码和微任务(如 Promise.then)必须先跑完。即使设为 0,它也要等本轮事件循环清空微任务后,才在下一轮开头执行。

常见错误现象:

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
输出是 1 4 3 2,不是 1 4 2 3。

  • setTimeout、setInterval、I/O、UI 渲染 属于宏任务,排队等下一轮
  • Promise.then/catch/finally、MutationObserver、queueMicrotask 是微任务,插队到本轮末尾执行
  • 浏览器中最小超时值实际约 4ms(非 0),Node.js 约 1ms

Promise.then 为什么比 setTimeout 快

关键不在“快”,而在**执行时机不同**:Promise.then 回调进入微任务队列,setTimeout 进入宏任务队列。事件循环每轮只取一个宏任务,但会清空全部微任务。

java-enterprise
java-enterprise

Java企业开发专家,专注于Spring Boot、微服务架构和JVM优化。适用于:Java语言掌握、

下载

实操建议:

Promise.resolve().then(() => console.log('a'));
Promise.resolve().then(() => console.log('b'));
setTimeout(() => console.log('c'), 0);
输出一定是 a b c,哪怕 c 的定时器先注册。

  • 连续多个 Promise.then 会按顺序立即串行执行(本轮微任务队列内)
  • 想打断长链避免阻塞渲染?用 queueMicrotask 或拆成 setTimeout(..., 0) 推到下一轮
  • 不要依赖 Promise.then 的“即时性”做时间敏感操作(比如动画帧同步)

async/await 本质是语法糖,不是线程切换

async 函数返回 Promise,await 只是暂停函数执行、把后续代码转成 Promise.then 回调——它不释放线程,也不让出 CPU,只是让 JS 引擎把控制权交还给事件循环。

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

容易踩的坑:

async function f() {
  console.log('start');
  await Promise.resolve();
  console.log('end');
}
f();
console.log('after');
输出是 start after end,不是 start end after。

  • await 后面如果不是 Promise,会被自动包装成 Promise.resolve(value)
  • await 不会阻塞整个调用栈,只暂停当前 async 函数内部执行流
  • 密集计算(如大数组遍历)加 await 并不能防卡顿,得配合 setTimeout 或 requestIdleCallback

事件循环的复杂点不在概念本身,而在于宏任务与微任务的嵌套层级、浏览器与 Node.js 的实现差异(比如 Node.js 的 process.nextTick 比微任务还优先)、以及 DOM 更新时机(render 阶段夹在宏任务之间)。写异步逻辑时,少猜执行顺序,多用 console.timeLog 或 DevTools 的 Event Log 面板看真实调度。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

5347

2023.07.18

堆和栈区别
堆和栈区别

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

2348

2023.08.10

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

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

3938

2023.08.10

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

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

4116

2023.06.20

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

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

1295

2023.07.28

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

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

1658

2023.08.03

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

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

9663

2023.08.17

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

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

920

2023.09.01

Kratos框架HTTP与gRPC服务开发教程
Kratos框架HTTP与gRPC服务开发教程

本专题围绕Kratos框架双协议服务开发,涵盖HTTP路由与处理器编写、参数获取、gRPC服务实现与客户端调用、metadata上下文传递、encoding编解码注册、统一响应封装、超时控制与流式响应实现方法。

0

2026.10.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn