JavaScript Academy · 课时

queueMicrotask 与执行顺序

Q: 「queueMicrotask 与执行顺序」这节课中我会学到什么？

精确控制执行顺序。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

精确控制执行顺序。

queueMicrotask 与执行顺序 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

认识 queueMicrotask

queueMicrotask 可以直接安排一个微任务，而不必创建承诺对象。回调函数会在当前同步代码之后、任何宏任务之前运行。

它是将工作延迟到下一个微任务检查点的最简洁工具。

基本用法

将一个函数传给 queueMicrotask。同步代码完成后，该函数就会运行。

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

与承诺对象具有相同优先级

queueMicrotask 回调函数和承诺对象的 .then 共用微任务队列，并按照安排顺序运行。

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

优先于 setTimeout

与所有微任务一样，queueMicrotask 回调函数会在任何 setTimeout 宏任务之前运行，即使后者是较早安排的。

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

清空过程中的执行顺序

微任务按照 FIFO 顺序运行。最先加入队列的微任务会在队列清空时最先运行。

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

嵌套微任务

一个微任务可以再安排另一个微任务。新的微任务会在同一次清空过程中运行，排在当前已经入队的微任务之后，并且先于任何宏任务。

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

完整执行顺序示例

将同步代码、微任务和宏任务结合起来。请按照以下规则追踪执行顺序：先执行同步代码，然后按顺序执行微任务，最后执行定时器。

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

与异步/等待交错执行

await 的后续执行也属于微任务，因此它会按照安排顺序与 queueMicrotask 交错运行。

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

为何使用 queueMicrotask

当您必须将一小段工作延迟到当前调用栈之后、浏览器绘制或任何定时器触发之前时，请使用它。这样可以避免创建临时承诺对象所带来的开销和兑现语义。

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

避免无限微任务循环

由于微任务会在宏任务之前被完全清空，一个总是重新安排自身的回调函数会永远阻塞定时器和渲染。请始终设置停止条件。

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

完整的心智模型

每一轮事件循环都会执行一个宏任务（或初始脚本），然后清空所有微任务，接着进行渲染，最后重复这一过程。queueMicrotask 让您可以精确地接入清空阶段。

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

快速检查

queueMicrotask 回调函数相对于 setTimeout(fn, 0) 会在哪里运行？

回顾：queueMicrotask 与执行顺序

您已经掌握了细粒度的调度：

queueMicrotask 可以不通过承诺对象安排微任务。
它与承诺对象的回调函数共用微任务队列，并按照 FIFO 顺序执行。
必须先清空所有微任务，然后才能执行任何宏任务和进行渲染。
循环模型是：宏任务、清空微任务、渲染，然后重复。

常见问题解答

「queueMicrotask 与执行顺序」课时是免费的吗？

是的 — 「queueMicrotask 与执行顺序」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「queueMicrotask 与执行顺序」这节课中我会学到什么？

精确控制执行顺序。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「queueMicrotask 与执行顺序」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy