Window clearInterval() method

Definition and usage

clearInterval() Method to clear using setInterval() method The timer set.

Tip

To clear the interval, please use setInterval() The returned id:

myInterval = setInterval(function, milliseconds);

Then you can call clearInterval() to stop execution:

clearInterval(myInterval);

See also:

setInterval() method

setTimeout() method

clearTimeout() method

Instance

Example 1

Display the time once per second. Use clearInterval() to stop the time:

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Try it yourself

Example 2

Switch between two background colors every 500 milliseconds:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Try it yourself

Example 3

Create a dynamic progress bar using setInterval() and clearInterval():

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  const id = setInterval(frame, 100);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

Try it yourself

Syntax

clearInterval(intervalId)

Parameters

Parameters Description
intervalId Required. From setInterval() Returns the interval ID.

Return value

None.

Description

clearInterval() This method stops the specified code from executing periodically, and the operation of these codes is called setInterval() method to start. Parameters intervalId must be called setInterval() method return value.

Browser support

All Browsers Support clearInterval():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support