English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
setInterval()method calls a function or executes a code block with a fixed time delay between each call.
The setInterval() method will continue to call the specified function or code untilclearInterval()method or close the window to stop execution.
This method returns a unique identifier for the interval, so you can later call clearInterval() to delete it.
To execute the function only once within the specified milliseconds, usesetTimeout()Method.
window.setInterval(function, delay, param1, param2, ...)
setInterval(function(){ alert("Hello World"); }, 2000);Test and See‹/›The numbers in the table specify the first browser version that fully supports the setInterval() method:
| Method | |||||
| setInterval() | 1 | 1 | 4 | 1 | 4 |
| Parameter | Description |
|---|---|
| function | （Required）Everydelay (delay)execute the function once every milliseconds |
| delay | （Required）The timer should be in milliseconds (1000 ms = 1seconds), delaying the execution between the specified function or code. If the value is less than10If the value is10 |
| param1, param2, ... | （Optional）Pass to thefunction(function)other parameters (IE9and unsupported in earlier versions) |
| Return value: | a number representing the interval ID value set for the timer. This value can be used with clearInterval() to cancel the timer |
|---|
This example refers to an external "named" function:
var intervalID;
function myFunc() {
intervalID = setInterval(myCallback, 2000);
}
function myCallback() {
alert("Hello World");
}Test and See‹/›Display the current time (like a digital watch, every1seconds to execute the "startTimer()" function):
var intervalID = setInterval(startTimer, 1000);
function startTimer() {
var date = new Date();
var x = document.getElementById("result");
x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}Test and See‹/›In the previous example, use clearInterval() to stop the time:
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);
}Test and See‹/›Every200 milliseconds to switch between two background colors, until it is stopped by 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);
}Test and See‹/›Create a dynamic progress bar using setInterval() and 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);
}Test and See‹/›Pass parameters to the myFunc function (in IE9and does not work in earlier versions):
var intervalID = setInterval(myFunc, 2000, "First", "Second", "Third");Test and See‹/›
However, if you use an anonymous function, it will run in all browsers:
var intervalID = setInterval(function() { myFunc("First", "Second", "Third"); }, 2000);Test and See‹/›Window (Window) Reference:clearInterval() method
Window (Window) Reference:setTimeout() method
Window (Window) Reference:clearTimeout() method