Window setInterval()
例子
每秒（1000 毫秒）显示“Hello”
setInterval(function () {element.innerHTML += "Hello"}, 1000);
自己试试 »
每秒调用 displayHello
setInterval(displayHello, 1000);
自己试试 »
更多例子在下方。
描述
setInterval() 方法以指定的间隔（毫秒）调用函数。
setInterval() 方法持续调用函数，直到 clearInterval() 被调用，或窗口被关闭。
1 秒 = 1000 毫秒。
注意
要只执行一次函数，请使用 setTimeout() 方法代替。
要清除一个间隔，请使用从 setInterval() 返回的 id
myInterval = setInterval(function, 毫秒 );
然后，您可以通过调用 clearInterval() 来停止执行
clearInterval(myInterval);
另请参阅
语法
setInterval(function, milliseconds, param1, param2, ...)
参数
| 参数 | 描述 |
| function | 必需的。 要执行的函数 |
| milliseconds | 必需的。 执行间隔。 如果该值小于 10，则使用 10 |
| param1, param2, ... | 可选的。 要传递给 function 的附加参数 在 IE9 及更早版本中不支持。 |
返回值
| 类型 | 描述 |
| 一个数字 | 定时器的 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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
