setTimeout and Blocking the Main Thread in JavaScript

setTimeout and Blocking the Main Thread in JavaScript

setTimeout callbacks only run when the call stack is empty. If you block the main thread, timers are delayed.

The Problem

setTimeout(() => console.log("timer"), 1000);
function block() {
  const start = Date.now();
  while (Date.now() - start < 5000) {}
}
block();
// "timer" logs after 5 seconds, not 1 second

The timer fires at 1 second, but the callback goes to the macrotask queue. The event loop cannot move it to the stack because block is still running.

How to Keep the Thread Free

1. Break long tasks into chunks with setTimeout(cb, 0).
2. Use Web Workers for heavy computation.
3. Use async APIs (fetch, fs.promises).
4. Use requestIdleCallback for low-priority work.

The Takeaway

setTimeout callbacks only run when the call stack is empty. Blocking the main thread delays all timers. Keep the thread free by breaking tasks into chunks, using Web Workers, and using async APIs.