See why Promise.all is faster. Watch it happen.
Configure async tasks, pick a pattern (sequential, Promise.all, or Promise.allSettled), and watch an animated Gantt chart show exactly when each task runs. Add failures to see how each pattern responds.
Configure tasks
Set duration and whether each task fails
Pick a pattern
Sequential, Promise.all, allSettled, for...of
Watch it run
Animated bars show real elapsed time
When to use each pattern
Why it matters
3 independent 1-second API calls: sequential = 3s total, Promise.all = 1s total. The difference grows with every additional request.
Sequential await
Task B depends on Task A's result: fetch a user, then fetch their orders using the user ID.
const user = await fetchUser();
const orders = await fetchOrders(user.id);Promise.all
Independent tasks where you need all results. One failure aborts everything.
const [user, posts] = await Promise.all([
fetchUser(), fetchPosts()
]);Promise.allSettled
Independent tasks where partial results are acceptable (a dashboard that shows what it can).
const results = await Promise.allSettled([
fetchUser(), fetchPosts()
]);for...of + await
Sequential processing of an array: each item must complete before the next begins.
for (const id of orderIds) {
await processOrder(id);
}Frequently Asked Questions
How does the simulation work?
- Each task: a JavaScript Promise wrapping a
setTimeoutof the configured duration. - Sequential mode: awaits each task before starting the next.
- `Promise.all` mode: starts all tasks simultaneously, resolves when every task finishes.
- `Promise.allSettled` mode: same as above, but collects all results even when some tasks fail.
- Animation: bars track real wall-clock time using
Date.now(). Nothing is faked or pre-calculated.
What does the fail toggle on each task do?
When toggled, the task's Promise rejects instead of resolves when its timer fires.
| Promise.all | Promise.allSettled | |
|---|---|---|
| On rejection | Entire call rejects immediately | Rejection collected alongside successes |
| Other tasks | Still complete, but outcome = failed | All settle normally |
| Use when | You need every result | Partial success is acceptable |
What does 'compare with sequential' do?
- Sequential timeline: bars stack one after another, each task waiting for the previous.
- Parallel timeline: bars all start at the same time, showing true concurrency.
- Both run simultaneously so you see the timing difference side by side in real time.
Does this reflect real-world async performance?
Yes, for I/O-bound work like API calls and database queries. The timing ratios match what you would see with real requests of the same durations.
Why does for...of look the same as sequential?
Because it is. for...of with await is sequential execution in a loop: each iteration awaits the previous before starting the next.
// These two are identical in timing behavior:
// Option 1: explicit sequential awaits
const a = await fetchA();
const b = await fetchB();
// Option 2: for...of with await (same timing, cleaner for arrays)
for (const id of ids) {
await processItem(id);
}