Understanding JavaScript Timers, the Event Loop, and setTimeout Execution

JavaScript developers are familiar with the setTimeout() function, but its underlying mechanics are often overlooked. The article begins with a simple code example (shown in the first image) to highlight how timer results can be surprising.

JS Code Execution

The JavaScript engine allocates a heap and a stack in memory. To illustrate execution order, a basic script is presented (second image) and the process is described step‑by‑step: the main() function starts, A() is pushed onto the stack, then B() , followed by console logs, and finally the stack is cleared.

Event Loop

JavaScript runs on a single thread, so only one task executes at a time. To avoid blocking the UI, asynchronous APIs such as setTimeout , AJAX, or DOM events delegate work to browser modules. When the asynchronous operation meets its condition, it is placed into a task queue; the event loop checks this queue whenever the main thread becomes idle and pushes the next task onto the stack.

setTimeout()

Returning to the initial code, a GIF (third image) visualizes the execution order. First, main() runs, logs "start", then encounters setTimeout calls, which are handed off to a timer module while the main thread continues. After the synchronous code finishes, the timer callbacks are queued and executed in order, producing the console output "start", "end", "world", "hello".

A modified version adds a long‑running for loop before the third timer. Because the main thread is blocked, the timer callbacks are delayed, and the final output becomes "hello", "world", "I am run" despite the shortest delay on the third timer.

Another note warns that browsers enforce a minimum delay for timers; a setTimeout(..., 0) is not truly instantaneous.

Summary

The event loop and setTimeout mechanisms are not difficult concepts, but they are frequently ignored, leading to subtle bugs. Mastering these fundamentals is essential for effective JavaScript development.

Reference: Philip Roberts – "What the heck is the event loop anyway?" (JSConf EU 2014) – https://www.youtube.com/watch?v=8aGhZQkoFbQ