Stopping with clearInterval

Learn to stop a timer with clearInterval and clearTimeout.

Stopping a timer with its id

Both setInterval and setTimeout return an id. You store this id in a variable and stop the timer with clearInterval(id) or clearTimeout(id).

const id = setInterval(() => {
  console.log('Tick');
}, 1000);
clearInterval(id);

Here id holds the id returned by setInterval. When clearInterval(id) is called, the repeating timer stops right away. In the same way, clearTimeout(id) cancels a setTimeout that has not run yet.

Stopping on a condition

To stop a timer on a condition, you write an if inside the callback. When the condition is met, clearInterval is called and the repeats end.

let count = 0;
const id = setInterval(() => {
  count = count + 1;
  if (count >= 3) {
    clearInterval(id);
  }
}, 1000);

This code stops the timer once count reaches 3. The id variable is reachable from inside the callback because it is declared in the same scope. This way the counter stops where you want, not forever.

Exercise Stop the counter when it passes 3

Complete the setInterval below: when count is greater than 3, stop it with clearInterval(id).

Show example solution

const counter = document.querySelector('#counter');
let count = 0;
const id = setInterval(() => {
  count = count + 1;
  counter.textContent = count;
  if (count > 3) {
    clearInterval(id);
  }
}, 1000);

Test yourself

Which stops a setInterval?
```
const id = setInterval(() => {
  console.log('Tick');
}, 1000);
```
- stopInterval(id)
- pauseTimer(id)
- clearInterval(id)
- endInterval(id)
Show answer

clearInterval(id) — Correct! clearInterval(id) stops the repeating timer.

Complete the clearInterval call

const id = setInterval(() => {
  console.log('Tick');
}, 1000);
____(id);

Show answer

const id = setInterval(() => {
  console.log('Tick');
}, 1000);
clearInterval(id);

Match functions to their purpose

setInterval

starts a repeating timer
clearInterval

stops a repeating timer
setTimeout

starts a one-shot timer
clearTimeout

cancels a timer not yet fired

Next lesson: requestAnimationFrame

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies