JavaScript provides timer functions for delayed or repeated execution of code in the browser (or event loop in Node.js).

setTimeout(fn, delay) / clearTimeout(id)

• Purpose: Run a function once after a specified delay (in milliseconds)
• Returns: A timeout ID that can be used to cancel with clearTimeout

const id = setTimeout(() => {
  console.log("Executed after 1 second");
}, 1000);

clearTimeout(id); // Cancels execution

• Executes once, not repeatedly
• Delay is minimum wait time, actual execution may be deferred due to the event loop

setInterval(fn, interval) / clearInterval(id)

• Purpose: Run a function repeatedly every interval milliseconds
• Returns: An interval ID to cancel with clearInterval

const id = setInterval(() => {
  console.log("Runs every 1 second");
}, 1000);

clearInterval(id); // Stops further executions

• Will continue indefinitely unless cleared
• Does not wait for previous execution to finish, may lead to overlap if function is slow

requestAnimationFrame(callback)

• Purpose: Schedule a function to run before the next browser repaint
• Ideal for: Animations and smooth rendering (syncs with 60Hz/refresh rate)
• Better than setTimeout(fn, 16) for animations

function animate() {
  // update visual state
  requestAnimationFrame(animate); // loop
}

requestAnimationFrame(animate);

• Cancels with cancelAnimationFrame(id)
• Callback receives a timestamp parameter: callback(timestamp: DOMHighResTimeStamp)