Window setInterval()
示例
每秒（1000 毫秒）顯示“Hello”
setInterval(function () {element.innerHTML += "Hello"}, 1000);
自己動手試一試 »
每秒呼叫 displayHello
setInterval(displayHello, 1000);
自己動手試一試 »
更多示例見下文。
描述
setInterval() 方法以指定的時間間隔（以毫秒為單位）呼叫函式。
setInterval() 方法會持續呼叫該函式，直到呼叫 clearInterval() 或關閉視窗。
1 秒 = 1000 毫秒。
注意
若只執行一次函式，請改用 setTimeout() 方法。
要清除一個間隔，請使用 setInterval() 返回的 id
myInterval = setInterval(函式, 毫秒);
然後可以透過呼叫 clearInterval() 來停止執行
clearInterval(myInterval);
另請參閱
語法
setInterval(函式, 毫秒, 引數1, 引數2, ...)
引數
| 引數 | 描述 |
| function | 必需。 要執行的函式 |
| milliseconds | 必需。 執行間隔。 如果值小於 10，則使用 10 |
| 引數1, 引數2, ... | 可選。 要傳遞給 函式 的額外引數 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 |
| 是 | 是 | 是 | 是 | 是 | 是 |
