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

Selbst ausprobieren

例子 2

每秒调用一次 displayHello：

setInterval(displayHello, 1000);

Selbst ausprobieren

页面下方提供更多实例。

语法

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
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Mehr Beispiele

Beispiel 3

Zeit wie eine Uhr anzeigen:

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

Selbst ausprobieren

Beispiel 4

Die Zeit mit clearInterval() stoppen:

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

Selbst ausprobieren

Beispiel 5

Dynamische Fortschrittsbalken mit setInterval() und clearInterval() erstellen:

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 + '%';
    }
  }
}

Selbst ausprobieren

Beispiel 6

Jedes 500 Millisekunden wechselt der Hintergrund zwischen zwei Farben:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Selbst ausprobieren

Beispiel 7

Parameter an die Funktion übergeben (funktioniert in IE9 und früheren Versionen nicht):

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

Selbst ausprobieren

Wenn Sie jedoch anonyme Funktionen verwenden, gelten sie für alle Browser:

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

Selbst ausprobieren