JS 中事件循环从入门到熟练怎么系统学习-js教程-PHP中文网

事件循环需通过实践掌握，本质是js单线程协调同步任务、异步回调与渲染的调度规则；调用栈执行同步代码，异步操作交由api处理；任务队列分宏任务（如settimeout）和微任务（如promise.then），每次调用栈清空后先清空所有微任务再取一个宏任务执行。

js 中事件循环从入门到熟练怎么系统学习

事件循环不是靠背概念记住的，是靠反复观察代码执行顺序、调试异步行为、对比不同写法结果练出来的。它本质是 JS 单线程如何协调同步任务、异步回调和渲染的调度规则，理解它才能真正看懂 setTimeout、Promise.then、async/await 为什么按那个顺序执行。

先别急着记“宏任务微任务”，先建立两个直观认知：

调用栈（Call Stack）：只管同步代码，一条一条往下压、往上弹；一旦遇到异步操作（比如 setTimeout 或 new Promise），就立刻交给浏览器或 Node.js 的 API 去处理，自己继续跑后面的同步代码；
任务队列（Task Queues）：分两类——宏任务队列（如 setTimeout 回调、I/O 回调、script 整体代码）和微任务队列（如 Promise.then/catch/finally、queueMicrotask）。每次调用栈清空后，JS 引擎会先清空所有微任务，再取一个宏任务执行。

把下面这段代码复制进浏览器控制台，逐行分析输出顺序，再改一两处（比如把 Promise.resolve() 换成 new Promise(r => r())），观察变化：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

预期输出是 1 → 4 → 3 → 2。重点不是记住这个结果，而是能说出：为什么 3 在 4 后面？为什么 2 最后才出来？每一步对应调用栈怎么变、微任务队列怎么入、宏任务怎么排队。

实际开发中，事件循环问题多出现在这些地方，可针对性练习：

多个 Promise 链嵌套：注意 .then 返回新 Promise 会触发下一轮微任务，连续写十个 .then 不会卡住主线程，但会连续清空微任务队列；
async/await 与 Promise 的等价转换：把 async function f() { await p; console.log('done'); } 手动转成 p.then(() => console.log('done'))，体会 await 实际插入的是微任务；
setTimeout(fn, 0) 和 Promise.then 的优先级差异：前者进宏任务队列，后者进微任务队列，所以哪怕时间设为 0，也一定晚于当前轮次的所有微任务；
DOM 渲染时机判断：requestAnimationFrame 在下一次重绘前执行，位置介于微任务之后、宏任务之前，适合做动画帧控制。

光读文字容易绕晕，动手才是关键：

在 Chrome DevTools 的 Sources 面板打断点，观察 Call Stack、Scope 和 Event Listener Breakpoints 的变化；
使用 performance.now() 或 console.time() 测量不同写法的实际耗时差异；
在 Node.js 中运行带 process.nextTick 的代码，对比它和 Promise.then 的执行顺序（nextTick 优先级略高于微任务，但仅限 Node 环境）。