Ventana setInterval()
Ejemplos
Mostrar "Hola" cada segundo (1000 milisegundos):
setInterval(function () {element.innerHTML += "Hello"}, 1000);
Llame a displayHello cada segundo:
setInterval(displayHello, 1000);
Más ejemplos a continuación.
Definición y uso
El setInterval()método llama a una función a intervalos específicos (en milisegundos).
El setInterval()método continúa llamando a la función hasta
clearInterval()que se llama o se cierra la ventana.
1 segundo = 1000 milisegundos.
Nota
Para ejecutar la función solo una vez, use el setTimeout()método en su lugar.
Para borrar un intervalo, use la identificación devuelta por setInterval():
myInterval = setInterval(function, milliseconds);
Luego puede detener la ejecución llamando a clearInterval():
clearInterval(myInterval);
Ver también:
Sintaxis
setInterval(function, milliseconds, param1, param2, ...)
Parámetros
| Parameter | Description |
| function | Required. The function to execute |
| milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
| param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
Valor devuelto
| Escribe | Descripción |
| Un número | La identificación del temporizador. Use esta identificación con clearInterval() para cancelar el temporizador. |
Más ejemplos
Ejemplo
Muestra la hora como un reloj digital:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
Ejemplo
Usando clearInterval() para detener el reloj digital:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
Ejemplo
Usando setInterval() y clearInterval() para crear una barra de progreso dinámica:
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 + '%';
}
}
}
Ejemplo
Alternar entre dos colores de fondo una vez cada 500 milisegundos:
const myInterval = setInterval(setColor, 500);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myInterval);
}
Ejemplo
Pase parámetros a la función (no funciona en IE9 y versiones anteriores):
setInterval(myFunc, 2000, "param1", "param2");
Sin embargo, si usa una función anónima, funciona en todos los navegadores:
setInterval(function() {myFunc("param1", "param2")}, 2000);
Compatibilidad con navegador
setInterval() es compatible con todos los navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |