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

Kişisel olarak deneyin

例子 2

每秒调用一次 displayHello：

setInterval(displayHello, 1000);

Kişisel olarak deneyin

页面下方提供更多实例。

语法

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
Desteklenen Desteklenen Desteklenen Desteklenen Desteklenen Desteklenen

Daha fazla örnek

Örnek 3

Saat gibi zamanı gösterin:

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

Kişisel olarak deneyin

Örnek 4

Elektronik saati durdurmak için clearInterval() kullanın:

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

Kişisel olarak deneyin

Örnek 5

setInterval() ve clearInterval() ile dinamik ilerleme çubuğu oluşturun:

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

Kişisel olarak deneyin

Örnek 6

Her 500 milisaniyede iki arka plan rengi arasında geçiş yapar:

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

Kişisel olarak deneyin

Örnek 7

Parametreleri fonksiyona geçirin (IE9 ve daha eski sürümlerde çalışmaz):

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

Kişisel olarak deneyin

Ancak, gizli fonksiyon kullanırsanız, tüm tarayıcılar için geçerlidir:

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

Kişisel olarak deneyin