Window clearInterval() 方法

定义和用法

clearInterval() 方法清除使用 setInterval() method 设置的计时器。

提示

如需清除间隔，请使用 setInterval() 返回的 id：

myInterval = setInterval(function, milliseconds);

然后你可以通过调用 clearInterval() 来停止执行：

clearInterval(myInterval);

另请参阅：

setInterval() method

setTimeout() 方法

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() The method stops the specified code from executing periodically, and the operation on these codes is called setInterval() method Started. Parameters intervalId Must be called setInterval() method The returned value after.

Browser support

所有浏览器都支持 clearInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持