The JavaScript event loop execution order, summarized in a simple manner

leonard

Leonard Ginters

Posted on November 18, 2021

The JavaScript event loop execution order, summarized in a simple manner

The simplified order

  1. Everything in sync
  2. Microtask queue
  3. 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
Enter fullscreen mode Exit fullscreen mode

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
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.

Related