setInterval()方法重復調用一個函數或執(zhí)行一個代碼段,每次調用之間有固定的時間延遲。
setInterval()方法會持續(xù)調用指定的函數或代碼,直到調用clearInterval()方法或關閉窗口才會停止執(zhí)行。
該方法返回一個唯一標識該間隔的間隔ID,因此您以后可以通過調用clearInterval()將其刪除。
要在指定的毫秒數內僅執(zhí)行一次函數,請使用setTimeout()方法。
window.setInterval(function, delay, param1, param2, ...)
setInterval(function(){ alert("Hello World"); }, 2000);測試看看?/?表格中的數字指定了完全支持setInterval()方法的第一個瀏覽器版本:
| Method | ![]() | ![]() | ![]() | ![]() | ![]() |
| setInterval() | 1 | 1 | 4 | 1 | 4 |
| 參數 | 描述 |
|---|---|
| function | (必需)每delay (延遲)毫秒執(zhí)行一次函數 |
| delay | (必需)計時器應以毫秒為單位(1000 ms = 1秒),在指定函數或代碼的執(zhí)行之間延遲。如果該值小于10,則使用值10 |
| param1, param2, ... | (可選)傳遞給該function(函數)其他參數 (IE9和更早版本中不支持) |
| 返回值: | 一個數字,表示設置的計時器的間隔ID值。將此值與clearInterval()方法一起使用可取消計時器 |
|---|
此示例引用外部“命名”函數:
var intervalID;
function myFunc() {
intervalID = setInterval(myCallback, 2000);
}
function myCallback() {
alert("Hello World");
}測試看看?/?顯示當前時間(就像數字手表一樣,每1秒鐘執(zhí)行一次“ 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()創(chuàng)建動態(tài)進度條:
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()方法