The JavaScript event loop execution order, summarized in a simple manner
Leonard Ginters
Posted on November 18, 2021
The simplified order
- Everything in sync
- Microtask queue
- Task queue
Real-world examples
Tasks
setTimeout
, setInterval
, setImmediate
, ...
Microtasks
Promises, queueMicrotask
, MutationObserver
, ...
Everything combined
// Schedules a new microtask
queueMicrotask(() => console.log("microtask"));
// Schedules a new task
setTimeout(() => console.log("task"), 0);
console.log("main");
// Output order: main, microtask, task
Please note that this describes a really, really simplified perfect-world case. If you would like to find out more, I can highly recommend Jake Archibald's blog post on this topic.
💖 💪 🙅 🚩
Leonard Ginters
Posted on November 18, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.