طريقة Window clearInterval()

التعريف والاستخدام

clearInterval() طريقة الت清除 باستخدام setInterval() 方法 الموقوت المحدد.

التحذير

للغاء تفعيل الفاصل الزمني، استخدم setInterval() الرقم الم返回:

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
支持 支持 支持 支持 支持 支持