JavaScript Asynchronous

JavaScript setInterval

Written by Swapnil RajaPublished 24 Aug 2026

setInterval runs a function over and over until you stop it.

It works like setTimeout but repeats.

It never stops on its own, so you must always be able to cancel it.

Example

javascript

let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick " + count);
  if (count === 3) {
    clearInterval(id);
  }
}, 10);

It ticks three times and then stops itself.

What is setInterval?

setInterval repeats a function on a fixed delay.

clearInterval stops it, using the id it returned.

Without a clearInterval it runs for as long as the page is open.

Syntax

javascript

const id = setInterval(handler, delay);
clearInterval(id);

Keep the id, or you can never stop it.

Stopping After a Number of Runs

Counting inside the callback is the usual way to end it.

Example

javascript

let ticks = 0;

const id = setInterval(function () {
  ticks = ticks + 1;
  if (ticks === 2) {
    clearInterval(id);
    console.log("stopped after " + ticks);
  }
}, 10);

The output is stopped after 2.

A Countdown

This is the classic use for a repeating timer.

Example

javascript

let left = 3;

const id = setInterval(function () {
  console.log(left);
  left = left - 1;
  if (left === 0) {
    clearInterval(id);
    console.log("liftoff");
  }
}, 10);

The output counts 3, 2, 1 and then liftoff.

Forgetting to Clear

An interval with no way to stop keeps running in the background.

On a real page that wastes battery and can leak memory.

Example

javascript

let runs = 0;

const id = setInterval(function () {
  runs = runs + 1;
  clearInterval(id);
  console.log("ran " + runs + " time and stopped");
}, 10);

Always know where your clearInterval is.

The Delay Is Between Starts

If the callback takes longer than the delay, runs can bunch up.

A repeating setTimeout avoids that, because it waits after each run.

Example

javascript

let count = 0;

function repeat() {
  count = count + 1;
  console.log("run " + count);
  if (count < 3) {
    setTimeout(repeat, 10);
  }
}

repeat();

Each run schedules the next one only when it has finished.

Clearing from Somewhere Else

The id is just a value, so it can be stored and used later.

Example

javascript

let ticks = 0;
const id = setInterval(function () {
  ticks = ticks + 1;
}, 10);

function stop() {
  clearInterval(id);
  return "stopped";
}

console.log(stop());

On a page this is usually done in a button's click handler.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript setInterval</title>
</head>
<body>

  <h1>setInterval</h1>

  <p id="out">0</p>
  <button id="stop">Stop</button>

  <script>
    const out = document.getElementById("out");
    let seconds = 0;

    const id = setInterval(function () {
      seconds = seconds + 1;
      out.textContent = seconds;
    }, 1000);

    document.getElementById("stop").addEventListener("click", function () {
      clearInterval(id);
      out.textContent = "Stopped at " + seconds;
    });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a faster timer:

Change 1000 to 200 and watch the counter speed up.

Important Points

setInterval repeats a function on a delay.
clearInterval stops it using the returned id.
It never stops on its own.
The delay is measured between starts, not between finishes.
A repeating setTimeout avoids overlapping runs.

Conclusion

setInterval is right for anything that ticks, like a clock or a countdown.

The one rule is to always keep a way of stopping it.

For work that varies in length, a repeating setTimeout is safer.

PreviousJavaScript setTimeout NextJavaScript Async Callbacks