Event queue

As explained in Secrets of the JavaScript Ninja, Second Edition

A queue that holds pending events for later processing.

A user clicks while a mousemove handler is still running. The click does not interrupt it: the browser keeps the pending event in a queue until JavaScript can handle it. This lets a single thread respond to events that arrive faster than their handlers finish—but a slow handler can make the page feel unresponsive. section 2.3.1 section 2.3.3

The basic event-handling cycle is:

• The browser detects an event and queues it. Detection and queueing happen outside the thread running the handler. section 2.3.1
• The event loop takes the event at the front and runs its associated handler, if one exists. Other events wait until that handler finishes. section 2.3.1 section 2.3.3
• If the queue is empty, the loop waits for more work. Keep handlers short enough that queued input does not leave users waiting. section 2.3.1

A mousemove followed by a click

Suppose a mousemove and then a click are queued. The mousemove handler runs first and adds a message to the DOM. The click waits; only after the mousemove handler returns does its handler run and add another message. Both actions are registered, but neither handler cuts in on the other. section 2.3.3

That single event queue is a useful starting picture, not the whole browser model. The event loop uses at least a macrotask queue and a microtask queue. Input and timer events are examples of macrotask work; promise callbacks are microtasks. After a task completes, queued microtasks run before the next macrotask, so an older waiting click need not run before a promise callback. A page may be re-rendered between macrotasks, but not before those microtasks run. section 13.1 section 13.1.2

Figure 13.6. If a microtask is queued in the microtask queue, it gets priority and is processed even if an older task is already waiting in the queue. In this case, the promise success microtask gets priority over the secondButton click event task.

The timing diagram shows why arrival order across the two queues is not enough to predict execution order: the promise microtask runs before an already-waiting click task. section 13.1.2

Timer delays deserve the same caution. When a timeout expires or an interval fires, its task joins the queue; it cannot interrupt running JavaScript. If an interval already has a task waiting, another firing does not add a duplicate task. section 13.2.1

How Secrets of the JavaScript Ninja, Second Edition covers it

How deep it goes

Works through queue polling and handler completion, then refines the single-queue picture with macrotask and microtask queues.

Examples

Traces queued mousemove and click handlers, a promise callback overtaking a click task, and timer tasks waiting behind running code.

What it assumes

Assumes familiarity with JavaScript handlers and promises while explaining browser event queueing from its basic cycle.

What you can do after

Diagnose/debug with it why clicks, promise callbacks, or timer handlers execute later than expected.

How it connects

Links event handlers and the event loop to macrotasks, microtasks, promises, timers, and UI rendering.

liveBookmanning.com

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

Related concepts

• eventhas part · An event is an occurrence, change, or associated record or notification recognized as significant within a system or context.
• event loopused by · An event loop is a runtime mechanism that repeatedly selects ready events or tasks and dispatches their associated work for execution.
• setTimeoutproduced by · setTimeout is a JavaScript function that schedules a callback to run after at least a specified delay.
• browserused by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
• setIntervalproduced by · setInterval is a JavaScript timer API that repeatedly schedules a callback to run at a specified interval until canceled.
• event handlingused by · Event handling is the process of receiving events and invoking associated code to respond to them.

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.