Microtasks in depth

Microtasks are the event loop’s sticky notes

The previous lesson introduced the event loop: JavaScript runs one task at a time, and when the call stack is empty the host can pick the next task. This lesson zooms into the moment between tasks: the microtask checkpoint.

A microtask is tiny work that must run after the current synchronous code finishes but before the next task, such as a timer callback. Promise callbacks, queueMicrotask, and the continuation after await all use this timing.

We will make only the promises-and-await claims needed for ordering. Full promise mechanics and async functions get their own lessons next: here, a settled promise queues a .then callback as a microtask, and await x pauses the async function so the rest resumes in a later microtask.

A promise job is a microtask created by promise machinery. In the code below, Promise.resolve() is already fulfilled, but the .then callback still does not run immediately. JavaScript queues a job that says, “call this callback with the result.”

1console.log("sync A");2Promise.resolve().then(() => console.log("promise job"));3console.log("sync B");4// sync A, sync B, promise job

That ordering is the first trick in almost every puzzle: the callback is ready, but it waits until the current script finishes. This is why a promise callback beats a timer but loses to ordinary synchronous lines.

queueMicrotask(fn) is the direct API: put fn in the microtask queue. It is useful when you want to finish the current call first, then do a tiny follow-up before timers, user events, or rendering get another chance.

Promise jobs and queueMicrotask callbacks share one FIFO queue. “FIFO” means first in, first out: if the promise job is queued first, it runs first; if the direct microtask is queued first, it runs first.

1console.log("task start");2setTimeout(() => console.log("timeout"), 0);3queueMicrotask(() => {4  console.log("micro 1");5  queueMicrotask(() => console.log("micro 2"));6});7Promise.resolve().then(() => console.log("promise"));8console.log("task end");

1Promise.resolve()2  .then(() => {3    console.log("then A");4    throw new Error("boom");5  })6  .catch(() => console.log("caught rejection"));7queueMicrotask(() => console.log("queued microtask"));8console.log("sync");

An async function starts synchronously. When it reaches await x, it places a bookmark, steps away, and the rest of the function continues in a later microtask. Modern engines have optimized this path, especially for native promises, so avoid counting exact “ticks.” Predict the output order from real runs, not folklore.

1async function demo() {2  console.log("before await");3  await null;4  console.log("after await");5}6demo();7console.log("outside");8// before await, outside, after await

The puzzle gallery has three await puzzles: a basic pause, two async functions interleaving, and a thenable object. A thenable is an object with a then method. Awaiting one adds promise assimilation behavior, so we state only the order proven by the real run in this lesson.

Now do the main skill: predict the next printed line, step by step. Each puzzle then runs for real in your browser and shows the captured order beside your prediction. The lesson tests also run the displayed source with Node 22’s async snippet runner.

1console.log("script");2Promise.resolve().then(() => console.log("promise"));3queueMicrotask(() => console.log("queueMicrotask"));4setTimeout(() => console.log("timeout"), 0);5console.log("end");

The player below is a labeled model of the queues for one medium puzzle. It is not an engine debugger. It uses the real final order, then shows the important queue events: schedule a promise job, schedule a direct microtask, schedule a timer task, drain microtasks, then run the timer.

1console.log("A");Run2Promise.resolve().then(() => {3  console.log("B");4  Promise.resolve().then(() => console.log("D"));5});6queueMicrotask(() => console.log("C"));7setTimeout(() => console.log("E"), 0);8console.log("F");

Where you’ll use microtasks

Most days you do not call queueMicrotask directly. You meet microtasks because promises and async functions are everywhere: data loading, animation setup, UI state updates, and test assertions. Knowing the order prevents “why did this log first?” bugs.

1let queued = false;2const pending = [];3 4export function scheduleMessage(message) {5  pending.push(message);6  if (queued) return;7  queued = true;8  queueMicrotask(() => {9    queued = false;10    console.log(pending.join(", "));11    pending.length = 0;12  });13}

This pattern lets several synchronous calls collect work, then flushes once before the next task. Keep the callback short. If the work might take noticeable time, split it into tasks instead so the page can respond.

Common misconceptions

Key takeaways

• Promise .then callbacks run as microtasks when the promise settles.
• queueMicrotask queues a microtask directly; keep it tiny.
• await runs code before the await now and resumes after it in a later microtask.
• Microtasks drain before the next task, including microtasks queued by other microtasks.
• Too many self-queuing microtasks can starve timers, input, and rendering.

Up next: Callbacks.