CCA Prep

Lesson 5.2Lesson 19 of 24

The event loop

Given a scenario, use event loop and event monitor or determine loop outcomes.

The event loopRun synchronous codeuntil the call stack isemptyDrain all microtasksthen · await ·queueMicrotaskRun one tasktimer · event · messageThe page can re-render between tasks, never in the middle of one

Key points

  1. 1Synchronous code runs to the end first. Nothing interrupts it, not even a timer that is due.
  2. 2Then the microtask queue is drained: promise reactions (then, catch, finally, the code after await) and queueMicrotask, including microtasks they add.
  3. 3Only then does the next task run: a timer, an event, a message. After every task the microtask queue is drained again.
  4. 4setTimeout(fn, 0) means "as a task, after at least 0 ms": it never runs before pending microtasks.
  5. 5The executor of new Promise and an async function's body up to the first await run synchronously, at the call.
What the exam guide checks here

Objective wording from the exam guide (English).

  • 5.2.K1The call stack, the task (macrotask) queue and the microtask queue
  • 5.2.K2Where callbacks go: promise reactions and queueMicrotask vs setTimeout, setInterval and events
  • 5.2.S1Determine the order in which a block of synchronous and asynchronous code logs

Lock it in

Answer scenario questions on this topic. Every option comes with an explanation.

Practise 5.2 · 12 questions