JavaScript clearInterval() Method

What You’ll Learn

The clearInterval() method stops a repeating timer started with setInterval(). This tutorial covers syntax, interval IDs, five practical examples, comparison with clearTimeout(), and cleanup habits every beginner should adopt.

Introduction

setInterval() runs a function again and again after a fixed delay. That is perfect for clocks, slideshows, or polling—but only while you still need repetition. When the job is done, call clearInterval() with the timer ID to shut it off.

Without clearing, the callback keeps firing in the background, updating the DOM, hitting APIs, or wasting battery. Learning clearInterval() is essential timer hygiene in browser JavaScript and Node.js alike.

Understanding the clearInterval() Method

When you call setInterval(fn, delay), the browser returns a numeric interval ID. Pass that ID to clearInterval(id) and the scheduled repeats stop. The function does not run one last time automatically—it simply will not be called again.

Think of the ID as a handle on a repeating alarm. You can clear it from a button click, after a condition becomes true, when navigating away, or when a one-shot setTimeout() decides enough time has passed.

📝 Syntax

General form of clearInterval():

clearInterval(intervalId);
// same on window:
window.clearInterval(intervalId);

Parameters

• intervalId — the value returned by setInterval(). If the ID is invalid or already cleared, the call is ignored.

Return value

• undefined.

Common patterns

• clearInterval(timerId) inside a Stop button handler.
• if (count >= max) clearInterval(timerId) when a limit is reached.
• clearInterval(timerId); timerId = null; after cleanup to avoid double-use.
• setTimeout(() => clearInterval(id), 5000) to auto-stop after five seconds.

Examples Gallery

Use the Try-it links for live counters and stop buttons. In DevTools, watch the console or on-page output stop updating once clearInterval() runs.

const intervalId = setInterval(function () {
  console.log("Tick…");
}, 1000);

setTimeout(function () {
  clearInterval(intervalId);
  console.log("Interval cleared after 5 seconds.");
}, 5000);

Tick…
Tick…
Tick…
Tick…
Tick…
Interval cleared after 5 seconds.

let count = 0;
const output = document.getElementById("count");

const intervalId = setInterval(function () {
  count++;
  output.textContent = count;
}, 500);

document.getElementById("stopBtn").addEventListener("click", function () {
  clearInterval(intervalId);
  output.textContent = count + " — stopped";
});

7 — stopped

let count = 0;
const max = 5;

const intervalId = setInterval(function () {
  count++;
  console.log("Count:", count);

  if (count >= max) {
    clearInterval(intervalId);
    console.log("Reached max — interval cleared.");
  }
}, 400);

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Reached max — interval cleared.

let intervalId = setInterval(function () {
  console.log("Running…");
}, 800);

function stopTimer() {
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
    console.log("Timer stopped and ID cleared.");
  }
}

stopTimer();

Running…
(maybe one more tick)
Timer stopped and ID cleared.

<p id="slide">Slide 1</p>
<button type="button" id="stopBtn">Stop slideshow</button>

<script>
  const slides = ["Slide 1", "Slide 2", "Slide 3"];
  let index = 0;

  const intervalId = setInterval(function () {
    index = (index + 1) % slides.length;
    document.getElementById("slide").textContent = slides[index];
  }, 1000);

  document.getElementById("stopBtn").onclick = function () {
    clearInterval(intervalId);
  };
</script>

Text cycles: Slide 1 → Slide 2 → Slide 3 → …
After Stop: text freezes on current slide

🚀 Common Use Cases

• Clocks and counters — stop updating when the user leaves the page section.
• Slideshows / carousels — halt auto-advance on Stop or when hovered.
• Polling APIs — cease requests after data arrives or on error.
• Games and animations — pause loops when the game ends.
• Progress indicators — stop fake loading bars at 100%.
• SPA cleanup — clear intervals when a component unmounts or route changes.

📝 Notes

• clearInterval() and clearTimeout() share the same ID pool in browsers—still use the matching clear function for clarity.
• Very short delays (0 ms) still queue on the event loop; clearing prevents backlog from growing.
• In Node.js, clearInterval accepts the object returned by setInterval there.
• Page unload destroys timers, but clear them earlier when navigating inside SPAs.
• requestAnimationFrame loops need cancelAnimationFrame, not clearInterval.
• Prefer one interval per feature—multiple overlapping intervals are harder to debug.

💡 Best Practices