Window clearInterval() 方法

定义和用法

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

提示

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

myInterval = setInterval(function, milliseconds);

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

clearInterval(myInterval);

另请参阅：

setInterval() 方法

setTimeout() 方法

clearTimeout() 方法

实例

例子 1

每秒显示一次时间。使用 clearInterval() 停止时间：

const myInterval = setInterval(myTimer, 1000);

function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

function myStopFunction() {
  clearInterval(myInterval);
}

亲自试一试

例子 2

每 500 毫秒在两种背景颜色之间切换一次：

const myInterval = setInterval(setColor, 500);

function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
  clearInterval(myInterval);
}

亲自试一试

例子 3

使用 setInterval() 和 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 + '%';
    }
  }
}

亲自试一试

语法

clearInterval(intervalId)

参数

参数 描述
intervalId 必需。从 setInterval() 返回的间隔 id。

返回值

无。

说明

clearInterval() 方法将停止周期性执行的指定代码，对这些代码的操作是调用 setInterval() 方法 启动的。参数 intervalId 必须是调用 setInterval() 方法 后的返回值。

浏览器支持

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

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