码农教程 - 一技在手,衣食无忧! tools

目录

window clearInterval()

❮上一节 ❮ 窗口对象参考 下一节❯

示例

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

const myInterval = setInterval(myTimer, 1000);

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

function myStopFunction() {
  clearInterval(myInterval);
}
亲自试一试 »

下面有更多示例。

描述

这个clearInterval()方法清除定时器设置setInterval()方法。

笔记

要清除间隔，请使用ID从 setInterval() 返回：

myInterval = setInterval( function, milliseconds);

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

clearInterval(myInterval);

也可以看看：

setInterval() 方法

setTimeout() 方法

clearTimeout() 方法

语法

clearInterval( intervalId)

参数

Parameter Description
intervalId Required.
The interval id returned from setInterval().

返回值

没有任何

更多示例

每 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);
}
亲自试一试 »

使用 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()所有浏览器都支持：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes Yes


❮上一节 ❮ 窗口对象参考 下一节❯