How Does setTimeout Work? Inside the Browser Event Loop Explained

JavaScript runs on a single thread, and setTimeout postpones execution of a callback while allowing the thread to continue processing other code.

The browser implements an event‑loop model: outside the JavaScript engine there is a task queue. When setTimeout is called, the timer is handed to the Web APIs; after the delay the timer pushes the callback onto the task queue. Once the call stack is empty, the engine pulls tasks from the queue in order and executes them.

Example code:

console.log('1');
setTimeout(function test(){
    console.log('2');
}, 5000);
console.log('3');

Execution steps illustrated:

log('1') is pushed onto the call stack and executed. setTimeout registers the test callback with the timer module (Web APIs).

log('3') is pushed onto the call stack and executed.

After 5 seconds the timer module detects that the delay has elapsed and adds the test callback to the task queue.

When the call stack becomes empty, the event loop dequeues the test callback, pushes it onto the stack, which then calls console.log('2'), producing the final output.

Images below illustrate each stage of the process: