Window setInterval() 方法

定義和用法

setInterval() 方法以指定的時間間隔（以毫秒為單位）調用函數。

setInterval() 方法會周期性調用函數，直到調用 clearInterval() 或關閉窗口。

注釋：1 秒 = 1000 毫秒。

提示

如需僅執行一次函數，請改用 setTimeout() 方法。

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

myInterval = setInterval(function, milliseconds);

然后你可以通過調用 clearInterval() 來停止執行：

clearInterval(myInterval);

另請參閱：

clearInterval() 方法

setTimeout() 方法

clearTimeout() 方法

實例

例子 1

每秒顯示 "Hello"（1000 毫秒）：

setInterval(function () {element.innerHTML += "Hello"}, 1000);

親自試一試

例子 2

每秒調用一次 displayHello：

setInterval(displayHello, 1000);

親自試一試

頁面下方提供更多實例。

語法

setInterval(function, milliseconds, param1, param2, ...)

參數

參數 描述
function 必需。要執行的函數
milliseconds

必需。執行間隔。

如果值小于 10，則使用 10。
param1, param2, ...

可選。傳遞給函數的附加參數。

IE9 及更早版本不支持。

返回值

類型 描述
數字

計時器的 ID。

請將此 id 與 clearInterval() 一起使用以取消計時器。

瀏覽器支持

所有瀏覽器都支持 setInterval()：

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

更多實例

例子 3

像電子表一樣顯示時間：

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

親自試一試

例子 4

使用 clearInterval() 停止電子表：

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

親自試一試

例子 5

使用 setInterval() 和 clearInterval() 創建動態進度條：

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

親自試一試

例子 6

每 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);
}

親自試一試

例子 7

將參數傳遞給函數（在 IE9 及更早版本中不起作用）：

setInterval(myFunc, 2000, "param1", "param2");

親自試一試

但是，如果您使用匿名函數，則適用于所有瀏覽器：

setInterval(function() {myFunc("param1", "param2")}, 2000);

親自試一試