JavaScript setTimeout & setInterval Interview Questions

What setTimeout actually does

// setTimeout registers a timer, returns a timer ID, and continues immediately
const timerId = setTimeout(() => {
  console.log('later')
}, 1000)

console.log('now')          // runs immediately
console.log(timerId)        // a number — the timer ID (for clearTimeout)

// Output:
// 'now'
// 5 (or whatever the timer ID is)
// (1 second passes)
// 'later'

Three things happen when you call setTimeout:

1. The browser/Node registers a timer with the OS.
2. setTimeout returns immediately with a timer ID.
3. After the delay elapses, the callback is placed in the macrotask queue.
4. When the call stack is empty, the event loop pulls the callback and runs it.

setTimeout(fn, 0) — not instant, but "as soon as possible"

setTimeout(() => console.log('timeout'), 0)
console.log('sync')

// Output: 'sync', 'timeout'
// Even with 0ms, the callback is a MACROTASK — current sync code runs first

// Useful for:
// 1. Deferring work until after the current call stack — UI rendering trick
function updateUIAndNotify() {
  renderLargeList()              // does DOM updates
  setTimeout(() => {
    notifyAnalytics('rendered')  // fires after browser has painted
  }, 0)
}

// 2. Breaking up long-running synchronous work
function processLargeArray(items) {
  let i = 0
  function processChunk() {
    const end = Math.min(i + 100, items.length)
    while (i < end) {
      processItem(items[i++])
    }
    if (i < items.length) {
      setTimeout(processChunk, 0)  // yield to event loop, continue next tick
    }
  }
  processChunk()
}

The minimum delay — 4ms in browsers

// Browsers enforce a minimum delay of ~4ms for nested timeouts
// (timers set from within other timer callbacks)
// setTimeout(fn, 0) is silently treated as setTimeout(fn, 4)

// For animation, use requestAnimationFrame — not setTimeout(fn, 16)
// requestAnimationFrame is synced to the display refresh rate (usually 60fps)
requestAnimationFrame(() => {
  element.style.transform = `translateX(${x}px)`  // runs before next paint
})

// Node.js has no 4ms minimum — setTimeout(fn, 0) is closer to 1ms
// but setImmediate() is preferred for "after I/O, before timers"

setTimeout return value and clearTimeout

// clearTimeout cancels a pending timer before it fires
const id = setTimeout(() => chargeCustomer(), 5000)

// User clicks cancel within 5 seconds
function onCancel() {
  clearTimeout(id)  // callback never runs
  console.log('cancelled')
}

// clearTimeout on an already-fired timer is safe — a no-op
const id2 = setTimeout(() => console.log('ran'), 100)
// After 100ms it fires
clearTimeout(id2)  // safe — does nothing

// clearTimeout on an invalid ID is also safe
clearTimeout(99999)  // no error, nothing happens

setInterval — repeated execution

// setInterval fires the callback every N milliseconds
const intervalId = setInterval(() => {
  updateClock()
}, 1000)

// IMPORTANT: setInterval does not wait for the callback to finish
// If the callback takes longer than the interval, calls pile up
const id = setInterval(() => {
  fetchAndRender()  // takes 2 seconds
}, 1000)             // fires every second — callbacks overlap!

// ✓ Self-scheduling setTimeout avoids overlap — waits for callback to finish
function scheduleNext() {
  fetchAndRender().then(() => {
    setTimeout(scheduleNext, 1000)  // schedules AFTER completion
  })
}
scheduleNext()

// clearInterval — stop it
clearInterval(intervalId)

setTimeout and the event loop — the full picture

console.log('1')

setTimeout(() => console.log('2 — setTimeout A'), 0)

Promise.resolve().then(() => {
  console.log('3 — Promise microtask')
  setTimeout(() => console.log('4 — setTimeout B'), 0)
})

setTimeout(() => console.log('5 — setTimeout C'), 0)

console.log('6')

// Trace:
// Sync code: logs 1, registers timer A, registers microtask, registers timer C, logs 6
// Microtask queue: [Promise handler]
// Macrotask queue: [timer A, timer C]
//
// Call stack clears → drain microtasks:
//   → logs 3, registers timer B → macrotask queue: [A, C, B]
// Microtask queue empty → run macrotask A: logs 2
// Drain microtasks (empty) → run macrotask C: logs 5
// Drain microtasks (empty) → run macrotask B: logs 4
//
// Final output: 1, 6, 3, 2, 5, 4

Timer accuracy — what can delay your callback

// setTimeout is NOT accurate under these conditions:

// 1. Long synchronous code blocks the event loop
setTimeout(() => console.log('fires late'), 100)

for (let i = 0; i < 1e9; i++) {}  // runs for ~1 second, blocking everything
// The setTimeout fires AFTER the loop — around 1000ms, not 100ms

// 2. Inactive browser tabs — browsers throttle timers in background tabs
// Minimum delay increases to 1000ms (1 second) to save battery

// 3. Device sleep / system load — OS scheduler delays wake-up

// Measuring actual delay:
const start = Date.now()
setTimeout(() => {
  const actual = Date.now() - start
  console.log(`Requested: 1000ms, actual: ${actual}ms`)
}, 1000)
// Might log: "Requested: 1000ms, actual: 1003ms"

The this binding problem inside setTimeout

const user = {
  name: 'Alice',

  // Regular function — this binding is lost when extracted for setTimeout
  greetBroken() {
    setTimeout(function() {
      console.log(this.name)  // undefined — 'this' is window/global
    }, 1000)
  },

  // Fix 1: arrow function — lexical this
  greetFixed() {
    setTimeout(() => {
      console.log(this.name)  // 'Alice' — arrow inherits this
    }, 1000)
  },

  // Fix 2: bind
  greetBound() {
    setTimeout(function() {
      console.log(this.name)
    }.bind(this), 1000)
  }
}

user.greetBroken()  // undefined (after 1s)
user.greetFixed()   // 'Alice' (after 1s)

Promise-based sleep — the clean modern pattern

// A promisified setTimeout — use in async functions for clean delays
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function demo() {
  console.log('start')
  await sleep(2000)    // pauses this async function for 2 seconds
  console.log('2 seconds later')
}

// Real-world: retry with delay
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fetch(url).then(r => r.json())
    } catch (err) {
      if (i === retries - 1) throw err      // last attempt — rethrow
      await sleep(1000 * Math.pow(2, i))    // exponential backoff: 1s, 2s, 4s
    }
  }
}

Recursive setTimeout vs setInterval — the practical difference

// setInterval: fires every N ms from when it was SET, regardless of callback duration
//   → callbacks can overlap if callback takes longer than interval

// Recursive setTimeout: fires N ms after the PREVIOUS callback COMPLETED
//   → callbacks never overlap, but total interval is callback duration + delay

// For polling where overlapping is dangerous (API calls):
// ✓ Use recursive setTimeout
async function poll() {
  try {
    const data = await fetch('/api/status').then(r => r.json())
    renderStatus(data)
  } finally {
    setTimeout(poll, 5000)  // schedule next only after this one completes
  }
}
poll()