JavaScript Timers — setTimeout & setInterval Examples

Sometimes code should not run now — it should run later. A message that appears after 3 seconds, a slideshow that changes every 5 seconds, a countdown that ticks down to zero. JavaScript has two timers for this: setTimeout runs a function once, after a delay. setInterval runs a function again and again, every so many milliseconds. Both are simple, but both have one rule beginners forget: they never stop by themselves.

Diagram — see how it fits together

setTimeout — once, later

setTimeout(() => {
  console.log("3 seconds are over!");
}, 3000);

The first argument is the function to run, the second is the delay in milliseconds: 1000 milliseconds is 1 second, so 3000 is 3 seconds. setTimeout does not pause the page — the code after it runs immediately, and the function runs later, in the background. Think of it as setting an alarm: you set it and carry on, and it rings when the time comes.

setInterval — again and again

let seconds = 10;
let timerId = setInterval(() => {
  seconds = seconds - 1;
  console.log(seconds);
  if (seconds === 0) {
    clearInterval(timerId);
  }
}, 1000);

setInterval returns an id — a number that names that timer. Keep it, because it is the only way to stop the timer: clearInterval(timerId) switches it off. setTimeout has the same pattern: it returns an id, and clearTimeout(id) cancels the alarm before it rings. A timer that is never stopped keeps running forever, quietly eating the page's attention — the classic "my page got slower" bug.

Common mistakes

• Writing setTimeout(sayHi(), 1000) — the brackets run sayHi at once; pass the function itself: setTimeout(sayHi, 1000).
• Forgetting to save the id — without it, clearInterval cannot stop the timer.
• Never clearing an interval — it runs forever, even after its job is done.
• Counting on exact timing — timers can run late; for real clocks use Date.now().

Remember

• setTimeout(fn, ms) runs fn once after ms milliseconds.
• setInterval(fn, ms) runs fn every ms milliseconds.
• Both return an id; clearTimeout(id) and clearInterval(id) stop them.
• Pass the function, not a call: setTimeout(sayHi, 1000), not setTimeout(sayHi(), 1000).
• Every timer needs its off switch.

Example explained

• let count = 10; — the countdown starts at 10.
• timerId = setInterval(() => { ... }, 1000); — the function runs every 1000 milliseconds, and its id is saved.
• count = count - 1; — each tick takes one off the count.
• document.getElementById("count").textContent = count; — the page shows the new number every second.
• if (count === 0) { clearInterval(timerId); } — at zero the timer switches itself off, so it does not run forever. The Stop button calls clearInterval(timerId) too.