Running Repeated Tasks with JavaScript setInterval()

The Basic Syntax (Identical to setTimeout)

const intervalId = setInterval(callbackFunction, delayInMilliseconds);

setInterval(() => {
  console.log("Tick ⏰");
}, 1000);
// Tick ⏰   (after 1s)// Tick ⏰   (after 2s)// Tick ⏰   (after 3s)// …forever, until the page closes or you stop it

Every rule from Lesson 32 applies here too:milliseconds not seconds, pass the function without(), callbacks are asynchronous, and timing is approximate.

🚨 The Golden Rule: ALWAYS Save the ID

Here's the difference betweensetTimeoutandsetIntervalthat causes real pain:

• A forgottensetTimeoutfires once and is done — harmless
• A forgottensetIntervalruns forever— memory leaks, runaway animations, duplicate timers stacking up 😱

// ❌ DANGEROUS — no way to ever stop this:setInterval(() => console.log("ticking forever…"), 1000);
// ✅ SAFE — the ID is your off switch:const clockId = setInterval(() => console.log("tick"), 1000);

🏆 Professional habit:the moment you writesetInterval, write itsclearIntervalplan in the same sitting. Every interval needs an exit strategy.

clearInterval(): Stopping the Metronome 🛑

const id = setInterval(() => {
  console.log("Still going…");
}, 1000);
// Stop after 5 seconds:setTimeout(() => {  clearInterval(id);  console.log("Stopped ✅");}, 5000);
// Still going… ×4// Stopped ✅

Notice the combo:setIntervalstarts the repetition,setTimeoutschedules the stop. The two siblings work beautifully together.

Self-Stopping Intervals — The Counter Pattern

Often the interval itself knows when to quit:

let count = 0;
const id = setInterval(() => {
  count++;
  console.log(`Beep ${count} 🔔`);
  if (count === 5) {
    clearInterval(id);
    // stop yourself!    console.log("That's enough beeping 😄");  }}, 1000);
    // Beep 1 🔔 … Beep 5 🔔 → That's enough beeping 😄

The condition-lives-inside pattern — check, act, maybe stop — is the heartbeat of every countdown and game loop.

🛠️ Project 1: Live Digital Clock 🕐

The classicsetIntervalproject — 10 lines of pure satisfaction:

<h1 id="clock">--:--:--</h1><script> function updateClock() {
  const now = new Date();
  // Lesson 33 skills! 📅
  document.getElementById("clock").textContent = now.toLocaleTimeString("en-IN", {
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: true
  });
} updateClock();
// show immediately (don't wait 1s!)  setInterval(updateClock, 1000);         // then tick every second</script>

Two pro details to notice:

1. updateClock()runs once immediately— otherwise the clock sits blank for the first second
2. toLocaleTimeStringfrom Lesson 33 does all the formatting — no manual zero-padding math

🛠️ Project 2: Countdown Timer with Stop & Reset ⏳

The complete pattern — start, tick, stop, reset:

<h1 id="display">10</h1><button id="startBtn">Start ▶️</button><button id="resetBtn">Reset 🔄</button><script> const display = document.getElementById("display");
let timeLeft = 10;
let timerId = null;
// null = not running
document.getElementById("startBtn").addEventListener("click",() => {
  // 🛡️ Guard: never start a SECOND interval while one runs!    if (timerId !== null) return;
  timerId = setInterval(() => {
    timeLeft--;
    display.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timerId);
      timerId = null;
      display.textContent = "🎉 Time's up!";
    }
  }, 1000);
});
document.getElementById("resetBtn").addEventListener("click",() => {
  clearInterval(timerId);
  // stop whatever's running    timerId = null;    timeLeft = 10;    display.textContent = timeLeft;  });</script>

⚠️ The Double-Interval Bug (Why the Guard Exists)

Withoutif (timerId !== null) return;, clicking "Start" twice createstwo overlapping intervals— the countdown ticks twice as fast, andclearIntervalcan only kill the second one. The first becomes a zombie timer. 🧟

The rule:one interval per feature. Guard before starting, always.

Passing Arguments & the Function-Call Trap (Same as setTimeout)

function remind(task) {
  console.log(`⏰ Reminder: ${task}`);
}// ❌ Runs immediately, interval gets undefined:setInterval(remind("Drink water 💧"), 5000);
// ✅ Extra args after the delay:setInterval(remind, 5000, "Drink water 💧");
// ✅ Or the arrow wrapper (modern favorite):setInterval(() => remind("Drink water 💧"), 5000);

⚠️ When setInterval Is the WRONG Tool

setIntervalhas two famous weaknesses — know them and when to switch tools:

Weakness 1: It Doesn't Wait for Your Code to Finish

If your callback takeslongerthan the interval, executionspile up and overlap:

// 😬 Polling a slow API every 1 second:setInterval(async () => {
await fetchAndProcessData();
// what if this takes 3 seconds?!
}, 1000);
// intervals don't care — they keep firing 💥

The fix — recursive setTimeout(schedules the next round onlyafterwork completes):

async function poll() {
  await fetchAndProcessData();
  // finish the work…  setTimeout(poll, 1000);          // …THEN schedule the next run ✅
}poll();

WithsetInterval: fire every 1s no matter what. With recursivesetTimeout:work, breathe 1s, work, breathe 1s.For anything involvingfetchor heavy processing, recursive setTimeout is the professional choice.

Weakness 2: It's Choppy for Animation

For visual motion, intervals drift and stutter (remember Lesson 32 — timers aren't precise). The browser's purpose-built tool:

// 🎬 For animation, use requestAnimationFrame instead:
function animate() {
  moveBoxForward();
  requestAnimationFrame(animate);
  // syncs with the screen's refresh ✅
}requestAnimationFrame(animate);

Decision Card 🃏

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 34 Quiz 🧠

1. What's the core difference betweensetTimeoutandsetInterval?
2. How do you stop a running interval?
3. What's the output?
   script.js

   Copy Code Run Online

   let n = 0;
   const id = setInterval(() => {
     n++;
     console.log(n);
     if (n === 3) clearInterval(id);
   }, 100);

4. Why is recursivesetTimeoutsafer thansetIntervalfor polling an API?
5. What bug appears if the user clicks your "Start" button twice without a guard?

(Answers: 1. setTimeout runs once after the delay; setInterval repeats every delay until cleared · 2. Save the ID and call clearInterval(id) — then set the variable to null · 3. 1, 2, 3 — then the interval clears itself · 4. setTimeout schedules the next round only after the current work finishes, so slow responses can't cause overlapping pile-ups · 5. Two overlapping intervals run simultaneously — the countdown ticks twice as fast and one becomes unkillable)