Two Promise Chains — Why They Interleave

·Medium·Event Loop

A1 B1 A2 B2 A3 B3 · one link per drain pass, appended at the tail

Practice mode

Step

Chain A registers — but only A1 is queued

Promise.resolve() is fulfilled, so .then(A1) queues a microtask immediately.

Algorithm workspace

Execution

Step 1 / 12insert

100%

browser

task

→microtasks

→render

↻

running: main script

Call stack

Queues

Microtasksmicrotask

drained fully after every task, before rendering

Tasks (timers, events)macrotask

one per loop turn

empty

Console output

no output yet

a .then callback is queued only when its promise settles — so a chain advances one link per drain pass

Explanation

This is the step people expect to queue all three. It does not: only the first link's promise has settled.

step 1 / 12

Space play← → stepHome reset

Time—·SpaceO(1) queued per chain at a time

Execution

1Promise.resolve()
2  .then(() => console.log('A1'))//microtasks: 1
3  .then(() => console.log('A2'))
4  .then(() => console.log('A3'));
5 
6Promise.resolve()
7  .then(() => console.log('B1'))
8  .then(() => console.log('B2'))
9  .then(() => console.log('B3'));
10 
11console.log('sync');

microtasks1

Command Palette

Two Promise Chains — Why They Interleave