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