Macrotask queue

As explained in Secrets of the JavaScript Ninja, Second Edition

A queue that holds pending tasks for processing by an event loop.

When JavaScript is busy, a click does not immediately run its handler. The click event waits in the macrotask queue until the current task finishes. section 13.1.1

Two clicks while JavaScript runs

If mainline code runs for 15 ms and two buttons are clicked during that time, both click events wait in the queue. The event loop runs their handlers in turn after the current task completes. section 13.1.1

Figure 13.2. This timing diagram shows how events are added to the task queue as they occur. When a task is done executing, the event loop takes it off the queue, and continues by executing the next task.

Follow the timing diagram to see events enter the queue and tasks run in sequence. section 13.1.1

How Secrets of the JavaScript Ninja, Second Edition covers it

How deep it goes

Traces two click events through a timed queue example without detailing runtime internals.

Examples

Uses two button clicks that occur while 15 milliseconds of mainline code runs.

What you can do after

Understand why click handlers can wait until currently executing JavaScript finishes.

How it connects

Connects the task queue to the event loop, JavaScript execution, and event handlers.

liveBookmanning.com

Read Secrets of the JavaScript Ninja, Second Edition on liveBook Get the book at manning.com

Related concepts

• event loopused by · An event loop is a runtime mechanism that repeatedly selects ready events or tasks and dispatches their associated work for execution.
• microtask queuecontrasts with · A microtask queue is an event-loop queue that holds pending microtasks for processing after the current synchronous execution and before subsequent task processing.
• taskused by · A task is a defined unit of work, computation, or action directed toward a result or objective.
• setTimeoutuses · setTimeout is a JavaScript function that schedules a callback to run after at least a specified delay.
• timerused by · A timer is a hardware or software mechanism that tracks time and triggers an event or action after a specified duration or at scheduled intervals.

This explainer was generated by Manning's knowledge graph from the text of Secrets of the JavaScript Ninja, Second Edition. The section links point to the parts of the book it draws on.