How to Stop a setInterval() Timer in JavaScript

Call clearInterval(timerId) to stop future repeats from a JavaScript timer. Save the value returned by setInterval(), then pass that same timer identifier to clearInterval(). A Stop button can call it from its click handler.

Stop setInterval() Using clearInterval() Function in JavaScript

setInterval(callback, delay, ...args) schedules a callback repeatedly and returns a timer identifier. The delay is expressed in milliseconds. It controls when callbacks become eligible to run, but it does not promise that each callback will begin at that exact time; other work can affect scheduling. Any arguments after the delay are passed to each callback invocation.

This Node.js example prints three updates, then clears the repeating timer using the identifier saved in timerId:

let count = 0;
const timerId = setInterval(() => {
  count += 1;
  console.log("Hello");
  if (count === 3) {
    clearInterval(timerId);
  }
}, 1000);

Hello
Hello
Hello

The supplied execution result contains these three lines, with empty stderr and exit code 0. The callback increments count on each run. When it reaches three, clearInterval(timerId) prevents a later scheduled run. In an application, retain the identifier for as long as the user may need to stop that timer; do not try to reconstruct it from the callback or delay.

For a browser button, include a message element and a Stop button, such as <p id="message"></p><button id="stop">Stop</button>. After those elements are available, select them with document.querySelector("#message") and document.querySelector("#stop"), then declare let timerId. Register the button handler with stopButton.addEventListener("click", () => clearInterval(timerId)), and assign the timer with timerId = setInterval(() => { message.textContent = "Still running"; }, 1000). The handler and timer setup must share the same timerId variable. Because a click happens after setup completes, the handler uses the returned identifier; clicking Stop prevents later updates. If the page script runs before the elements are parsed, wait until the DOM is ready before selecting them.

Clearing a timer prevents future callbacks scheduled by that timer. It does not interrupt a callback that has already begun or reverse changes that callback has already made. If a callback starts asynchronous work, clearing its timer also does not cancel that separate work; handle its cancellation according to that operation’s own API. This distinction helps when a Stop button appears to take effect only after current work finishes.

Each call to setInterval() creates its own repeating timer and returns its own identifier. Save each identifier if the page has multiple independent repeating tasks, and clear the one associated with the action the user takes. A timer identifier is not the callback function itself. Passing the callback, delay, or an unrelated identifier to clearInterval() does not target the timer you intended to stop. Once a timer has been cleared, calling clearInterval() for that same identifier again has no effect.

Use setInterval() when work should repeat until an action stops it. If the task should run only a fixed number of times, track that count and clear the timer when it reaches the desired total, as in the example. For a browser button, consider also changing its state or showing confirmation after the handler clears the timer so the user can tell the repeating updates have stopped.