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)

参数

返回值

无。

说明

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

浏览器支持

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