Método setInterval() de Window

Definición y uso

setInterval() método para llamar a la función con un intervalo de tiempo especificado (en milisegundos).

setInterval() El método llama periódicamente a la función hasta que se llama clearInterval() o cerrar la ventana.

Comentarios:1 segundo = 1000 milisegundos.

Consejo

Para ejecutar la función solo una vez, utilice setTimeout() método.

Para eliminar el intervalo, utilice setInterval() ID devuelto:

myInterval = setInterval(function, milliseconds);

Luego puede llamar a clearInterval() para detener la ejecución:

clearInterval(myInterval);

Véase también:

Método clearInterval()

Método setTimeout()

Método clearInterval()

Ejemplo

Ejemplo 1

Mostrar "Hello" cada segundo (1000 milisegundos):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Prueba personalmente

Ejemplo 2

Llamar a displayHello cada segundo:

setInterval(displayHello, 1000);

Prueba personalmente

Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

setInterval(function, milliseconds, param1, param2, ...)

Parámetros

Parámetros Descripción
function Obligatorio. Función a ejecutar
milliseconds

Obligatorio. Intervalo de ejecución.

Si el valor es menor de 10, utilice 10.
param1, param2, ...

Opcional. Parámetros adicionales pasados a la función.

IE9 y versiones anteriores no lo admiten.

Valor de retorno

Tipo Descripción
Número

ID del temporizador.

Por favor, asocie este clearInterval() usar juntos para cancelar el temporizador.

Admite el navegador

Todos los navegadores lo admiten setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte

Más ejemplos

Ejemplo 3

Muestre la hora como un reloj digital:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Prueba personalmente

Ejemplo 4

Detenga el reloj digital utilizando clearInterval():

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

Prueba personalmente

Ejemplo 5

Cree una barra de progreso dinámica utilizando setInterval() y 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 + '%';
    }
  }
}

Prueba personalmente

Ejemplo 6

Cambia entre dos colores de fondo 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);
}

Prueba personalmente

Ejemplo 7

Pase parámetros a la función (no funciona en IE9 y versiones anteriores):

setInterval(myFunc, 2000, "param1", "param2");

Prueba personalmente

Pero, si utiliza una función anónima, es compatible con todos los navegadores:

setInterval(function() {myFunc("param1", "param2")}, 2000);

Prueba personalmente