JavaScript Academy · Lesson

queueMicrotask and Ordering

Control execution order precisely.

queueMicrotask and Ordering is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Meet queueMicrotask

queueMicrotask is a direct way to schedule a microtask without creating a Promise. The callback runs after current synchronous code but before any macrotask.

It is the cleanest tool for deferring work to the very next microtask checkpoint.

Basic Usage

Pass a function to queueMicrotask. It runs after the synchronous code finishes.

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

Same Priority as Promises

A queueMicrotask callback and a Promise .then share the microtask queue. They run in the order they were scheduled.

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

Beats setTimeout

Like all microtasks, a queueMicrotask callback runs before any setTimeout macrotask, even one scheduled earlier.

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

Ordering Within the Drain

Microtasks run in FIFO order. The first one queued runs first when the queue drains.

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

Nesting Microtasks

A microtask can queue another microtask. The new one runs in the same drain, after the currently queued ones, before any macrotask.

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

Full Ordering Demo

Combine synchronous code, microtasks, and a macrotask. Trace the rule: sync first, then microtasks in order, then the timer.

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');

Interleaving With async/await

An await continuation is also a microtask, so it interleaves with queueMicrotask in scheduling order.

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

Why Use queueMicrotask

Use it when you must defer a tiny piece of work to after the current call stack but before the browser paints or any timer fires. It avoids the overhead and resolution semantics of creating a throwaway Promise.

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

Avoid Infinite Microtask Loops

Because microtasks drain completely before macrotasks, a callback that always re-queues itself will block timers and rendering forever. Always have a stopping condition.

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

The Complete Mental Model

Each event loop turn: run a macrotask (or initial script), then drain every microtask, then render, then repeat. queueMicrotask lets you hook precisely into that drain phase.

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

Quick Check

Where does a queueMicrotask callback run relative to setTimeout(fn, 0)?

Recap: queueMicrotask and Ordering

You mastered fine-grained scheduling:

queueMicrotask schedules a microtask without a Promise.
It shares the microtask queue with Promise callbacks, in FIFO order.
All microtasks drain before any macrotask and before rendering.
The loop model: macrotask, drain microtasks, render, repeat.

Frequently asked questions

Is the “queueMicrotask and Ordering” lesson free?

Yes — the full text of “queueMicrotask and Ordering” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “queueMicrotask and Ordering”?

Control execution order precisely. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “queueMicrotask and Ordering” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy