
setInterval()方法重复调用一个函数或执行一个代码段,每次调用之间有固定的时间延迟。
setInterval()方法会持续调用指定的函数或代码,直到调用clearInterval()方法或关闭窗口才会停止执行。
该方法返回一个唯一标识该间隔的间隔ID,因此您以后可以通过调用clearInterval()将其删除。
要在指定的毫秒数内仅执行一次函数,请使用setTimeout()方法。
语法:
window.setInterval(function, delay, param1, param2, ...)
setInterval(function(){ alert("Hello World"); }, 2000);测试看看‹/›浏览器兼容性
表格中的数字指定了完全支持setInterval()方法的第一个浏览器版本:
| Method | ![]() | ![]() | ![]() | ![]() | ![]() |
| setInterval() | 1 | 1 | 4 | 1 | 4 |
参数值
| 参数 | 描述 |
|---|---|
| function | (必需)每delay (延迟)毫秒执行一次函数 |
| delay | (必需)计时器应以毫秒为单位(1000 ms = 1秒),在指定函数或代码的执行之间延迟。如果该值小于10,则使用值10 |
| param1, param2, ... | (可选)传递给该function(函数)其他参数 (IE9和更早版本中不支持) |
技术细节
| 返回值: | 一个数字,表示设置的计时器的间隔ID值。将此值与clearInterval()方法一起使用可取消计时器 |
|---|
更多实例
此示例引用外部“命名”函数:
var intervalID;
function myFunc() {
intervalID = setInterval(myCallback, 2000);
}
function myCallback() {
alert("Hello World");
}测试看看‹/›显示当前时间(就像数字手表一样,每1秒钟执行一次“ startTimer()”函数):
var intervalID = setInterval(startTimer, 1000);
function startTimer() {
var date = new Date();
var x = document.getElementById("result");
x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}测试看看‹/›在上一个示例中,使用clearInterval()来停止时间:
var intervalID = setInterval(startTimer, 1000);
function startTimer() {
var date = new Date();
var x = document.getElementById("result");
x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
function stopTimer() {
clearInterval(intervalID);
}测试看看‹/›每200毫秒一次在两种背景颜色之间切换,直到由clearInterval()将其停止:
var t = setInterval(setColor, 200);
function setColor() {
var x = document.body;
x.style.backgroundColor = (x.style.backgroundColor == "coral") ? "lightgreen" : "coral";
}
function stopColor() {
clearInterval(t);
}测试看看‹/›使用setInterval()和clearInterval()创建动态进度条:
var i = 0;
var bar = document.getElementById("progress-bar");
var t;
function start() {
t = setInterval(progress, 60);
}
function progress() {
if(i < 100) {
i++;
bar.style.width = i + "%";
bar.innerHTML = i + " %";
} else {
clearInterval(t);
}
}
function stop() {
clearInterval(t);
}测试看看‹/›将参数传递给myFunc函数(在IE9和更早版本中不起作用):
var intervalID = setInterval(myFunc, 2000, "First", "Second", "Third");测试看看‹/›
但是,如果您使用匿名函数,它将在所有浏览器中运行:
var intervalID = setInterval(function(){ myFunc("First", "Second", "Third"); }, 2000);测试看看‹/›相关参考
窗口(Window)参考:clearInterval()方法
窗口(Window)参考:setTimeout()方法
窗口(Window)参考:clearTimeout()方法




