Window setInterval() 方法
页面下方有更多实例。
定义和用法
setInterval() 方法以指定的间隔（毫秒）调用函数或计算表达式。
setInterval() 方法将继续调用函数，直到调用 clearInterval() 或关闭窗口。
setInterval() 返回的ID值用作 clearInterval() 方法的参数。
提示: 1000毫秒 = 1秒。
提示: 要在指定的毫秒数后只执行一次函数，请使用 setTimeout() 方法。
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| setInterval() | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
语法
setInterval(function, milliseconds, param1, param2, ...)
参数值
| 参数 | 描述 |
|---|---|
| function | 必需。将要执行的函数 |
| milliseconds | 必需。执行代码的频率间隔（以毫秒为单位）。如果该值小于10，则使用值10 |
| param1, param2, ... | 可选。传递给函数的其他参数（IE9 及更早版本不支持） |
技术细节
| 返回值: | 一个数值，表示设置的计时器的 ID 值。将此值与 clearInterval() 方法一起使用可取消计时器 |
|---|
更多实例
实例
你可以通过调用一个已命名的函数，每三秒（3000 毫秒）弹出 "Hello" :
var myVar;
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
亲自试一试 »
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
实例
显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
亲自试一试 »
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
实例
使用 clearInterval() 来停止 setInterval 的执行:
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
亲自试一试 »
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
实例
使用 setInterval() 和 clearInterval()来创建动态进度条:
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
亲自试一试 »
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
实例
每300毫秒在两种背景色之间切换一次:
var myVar = setInterval(setColor, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
亲自试一试 »
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
实例
将参数传递给 alertFunc 函数（在IE9及更早版本中不起作用）:
var myVar;
function myStartFunction() {
myVar = setInterval(alertFunc, 2000, "First param", "Second param");
}
亲自试一试 »
function myStartFunction() {
myVar = setInterval(alertFunc, 2000, "First param", "Second param");
}
但是，如果使用匿名函数，它将适用于所有浏览器:
var myVar;
function myStartFunction() {
myVar = setInterval(function(){ alertFunc("First param", "Second param"); }, 2000);
}
亲自试一试 »
function myStartFunction() {
myVar = setInterval(function(){ alertFunc("First param", "Second param"); }, 2000);
}
相关页面
Window 对象: clearInterval() 方法
Window 对象: setTimeout() 方法
Window 对象: clearTimeout() 方法
❮ Window 对象
