JS Timing

JavaScript Timing: setTimeout, setInterval, & Event Loop Timers

JavaScript timing functions delay execution or execute callbacks periodically. setTimeout schedules a callback after a specified delay, while setInterval repeatedly executes a callback until cleared.

Timers & Event Loop Architecture

flowchart TD
    Call["setTimeout(fn, delayMs) Called"] --> WebAPI["Web API Timer Subsystem"]
    WebAPI -->|Delay Expires| TaskQueue["Task Queue (Macrotask)"]
    TaskQueue -->|Call Stack Empty| EventLoop["Event Loop Pushes Callback to Call Stack"]
    EventLoop --> Execute["Execute Timer Callback"]

Timing API Summary

Practical Code Example

// Demonstrating setTimeout, setInterval, and timer cancellation

// 1. Delayed Execution with setTimeout
console.log("1. Script Started");

const timeoutId = setTimeout(() => {
  console.log("3. setTimeout Executed after 100ms!");
}, 100);

console.log("2. Script Continued (Non-blocking)");

// 2. Periodic Execution with setInterval and Clearing
let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`Periodic Interval Tick #${count}`);

  if (count >= 3) {
    console.log("Stopping Interval...");
    clearInterval(intervalId); // Stop timer repetition!
  }
}, 50);

// 3. Minimum Delay (0ms) Delays to Next Event Loop Macrotask Tick
setTimeout(() => {
  console.log("4. setTimeout 0ms executed after synchronous stack clears.");
}, 0);

Best Practices & Gotchas

• Always Store and Clear Timer IDs: Store returned timer IDs and call clearTimeout(id) or clearInterval(id) when components unmount to prevent memory leaks.
• Recursive setTimeout Over setInterval: Prefer recursive setTimeout() for polling tasks. setInterval can queue back-to-back executions if the callback takes longer than the interval delay.
• Zero Delay (0ms) is Not Instant: setTimeout(fn, 0) schedules the callback for the next event loop macrotask iteration after current synchronous code completes.

Self-Check Challenge

Explain why setTimeout(fn, 0) executes AFTER synchronous code placed below it in the source file.