← Previous Next →

Timers (setTimeout, setInterval)

JavaScript timers allow scheduling code execution after a delay or repeatedly at intervals. The two main timer functions are setTimeout and setInterval.

Illustration of Timers
Illustration of Timers

setTimeout

setTimeout runs a function once after a specified delay (in milliseconds).

  • Syntax: setTimeout(callback, delay)
  • callback: Function to run after delay
  • delay: Time in milliseconds to wait

📌 Deep Dive: Using setTimeout

JAVASCRIPT
setTimeout(() => {
  console.log("Hello after 2 seconds");
}, 2000);
Output
Hello after 2 seconds (after 2 sec delay)

setInterval

setInterval runs a function repeatedly at fixed intervals (in milliseconds) until stopped.

  • Syntax: setInterval(callback, interval)
  • callback: Function to run repeatedly
  • interval: Time in milliseconds between runs

📌 Deep Dive: Using setInterval

JAVASCRIPT
const intervalId = setInterval(() => {
  console.log("Repeated every second");
}, 1000);

// To stop the interval after 5 seconds
setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval stopped");
}, 5000);
Output
Repeated every second (×5), then "Interval stopped"

💡 Important:

Both setTimeout and setInterval return a unique timer ID. Use clearTimeout(id) or clearInterval(id) to cancel timers before they run.

Comparison: setTimeout vs setInterval
FeaturesetTimeoutsetInterval
RunsOnce after delayRepeatedly every interval
Return valueTimeout IDInterval ID
Cancel functionclearTimeout(id)clearInterval(id)
Use caseOne-time delayPeriodic repeated actions

⚠️ Common Pitfall

Using setInterval can cause overlapping calls if the callback takes longer than the interval. Consider using recursive setTimeout for better control.

Example of recursive setTimeout for repeated tasks:

📌 Deep Dive: Recursive setTimeout for intervals

JAVASCRIPT
function repeatTask() {
  console.log("Task runs every 1 second, safely");
  setTimeout(repeatTask, 1000);
}
repeatTask();
Output
Logs message every 1 second without overlap

💡 Summary

  • setTimeout: run once after delay
  • setInterval: run repeatedly at intervals
  • Use clearTimeout or clearInterval to stop timers
  • Recursive setTimeout can offer better control for repeated tasks
← Previous Next →