The event loop coordinates synchronous JavaScript with asynchronous work. When the execution stack is empty, it moves callbacks from the task and microtask queues onto that stack. section 13.3.2
A simplified event-loop cycle proceeds as follows:
- Execute every pending microtask in order, including microtasks added while earlier microtasks run. Promise callbacks are common microtasks. section 13.3.3 section 13.3.2
- Execute the oldest eligible task, such as an event-listener, setTimeout(), or setInterval() callback. section 13.3.3 section 13.3.2
- Allow the browser to render pending DOM changes, then begin another cycle while tasks remain. section 13.3.3 section 13.5
Scheduling work after updates
A scheduler can queue its update-processing function as a microtask. A nextTick() function can then return a Promise that resolves after pending scheduler jobs finish, allowing code after await nextTick() to run after the component has re-rendered. section 14.1.2
Figure 13.5 Execute all the microtasks in the microtask queue.
Use the cycle diagram to trace why all pending microtasks run before the next task. section 13.3.3
