event-loop.md

JS Event Loop Exercise

The goal of this exercise is to deepen your knowledge about the javascript event loop, the difference between micro- and macrotasks and the execution timings of different scheduling APIs.

Please write a function that results in the following flamechart.

You can use this plain javascript example as a starting point for your exercise. exercise template.

Note

It's also possible to run this exercise by checking out the js playground project. Use that one if you have problems with stackblitz

Scheduling APIs

// scheduling APIs

setTimeout();
Promise.resolve();
queueMicrotask();
window.requestIdleCallback();
requestAnimationFrame();

Solution

// doesn't matter where
requestIdleCallback(() => {
  doWork();
})

requestAnimationFrame(() => {
  queueMicrotask(() => {
    doWork();
  })
  doWork();
})
requestAnimationFrame(() => {
  doWork();
})

setTimeout(() => {
  doWork();
  queueMicrotask(() => {
    doWork();
  })
  // move the rAF after the settimeout
  requestAnimationFrame(() => {
    doWork();
  })
})