The Event Loop, Visualized

Promise.all — waiting in parallel — interactive event loop example

1function wait(ms, label) {
2  return new Promise((resolve) => {
3    setTimeout(() => resolve(label), ms);
4  });
5}
6 
7const a = wait(100, 'a');
8const b = wait(100, 'b');
9console.log('both timers already running');
10 
11Promise.all([a, b]).then((results) => {
12  console.log('done:', results.join(', '));
13});

wait(100, "a") runs immediately. The executor calls setTimeout right away, so the 100ms clock starts now — not when you await it.

1 / 9

Call stack

script

Web APIs — browser land

resolve a 100ms

The event loop — is the call stack empty? → drain the microtask queue first → then take one callback.

Microtask queue — priority

Callback queue

Console

Fig. — Promise.all — waiting in parallel · step 1 of 9

What is going on here

The mistake this scene fixes is believing that await starts the work. It does not. Calling wait(100, "a") starts the timer immediately, because the Promise executor runs synchronously. await only decides when you stop and collect the result.

That is why `const a = wait(...); const b = wait(...); await Promise.all([a, b])` finishes in about 100ms while `await wait(...); await wait(...)` — the same calls inside a loop with an await on each iteration — takes 200ms. In the second version you suspend before the second timer is ever created, so the two waits are forced into a queue. The fix is never Promise.all by itself; it is starting both operations before awaiting either.

Notice too that the results arrive in input order — a, b — even though the timers settle at essentially the same instant. Promise.all writes each value to its own index as it lands, so array position reflects the input, never the finishing order. If you need finishing order, that is Promise.race or Promise.any.

Common questions

Does Promise.all run the promises in parallel?

Promise.all does not run anything. The promises were already running before it was called — a promise starts its work when it is created. Promise.all only waits for all of them and collects the results, which is why the total time is the longest single operation rather than their sum.

Why is await in a for loop slower than Promise.all?

Awaiting inside the loop suspends the function before the next iteration starts its operation, so each one begins only after the previous finished. Mapping the loop to an array of already-started promises and awaiting Promise.all lets every operation overlap.

Does Promise.all return results in completion order?

No, results come back in the order of the input array. Each promise writes its value to its own index as it settles, so the fastest one does not jump to the front.

Every question on one page →·Run your own code →

Embed this figure in your own post →

Drop this into any article or course page. It stays interactive — readers can step through it without leaving your site.