目录

window setInterval()

❮上一节 ❮ 窗口对象参考下一节❯

示例

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

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

亲自试一试 »

每秒调用displayHello：

setInterval(displayHello, 1000);

亲自试一试 »

下面有更多示例。

描述

这个setInterval()方法以指定的时间间隔（以毫秒为单位）调用函数。

这个setInterval()方法继续调用该函数直到clearInterval()被调用，或者窗口被关闭。

1 秒 = 1000 毫秒。

笔记

要仅执行该函数一次，请使用setTimeout()方法代替。

要清除间隔，请使用ID从 setInterval() 返回：

myInterval = setInterval( function, milliseconds);

然后你可以通过调用clearInterval()来停止执行：

clearInterval(myInterval);

也可以看看：

clearInterval() 方法

setTimeout() 方法

clearTimeout() 方法

语法

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

参数

Parameter	Description
function	Required. The function to execute
milliseconds	Required. The execution interval. If the value is less than 10, 10 is used
param1, param2, ...	Optional. Additional parameters to pass to the function Not supported in IE9 and earlier.

返回值

类型	描述
一个号码	定时器的id。将此 id 与clearInterval() 一起使用来取消计时器。

更多示例

示例

像数字手表一样显示时间：

setInterval(myTimer, 1000);

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

亲自试一试 »

示例

使用clearInterval()停止数字手表：

const myInterval = setInterval(myTimer, 1000);

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

function myStopFunction() {
clearInterval(myInterval);
}

亲自试一试 »

示例

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

亲自试一试 »

示例

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

亲自试一试 »

示例

将参数传递给函数（在 IE9 及更早版本中不起作用）：

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

亲自试一试 »

但是，如果您使用匿名函数，它适用于所有浏览器：

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

亲自试一试 »

浏览器支持

setInterval()所有浏览器都支持：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

❮上一节 ❮ 窗口对象参考下一节❯