Los últimos tutoriales de desarrollo web
 

Ventana setInterval() Method

<Ventana Object

Ejemplo

Alerta "Hello" cada 3 segundos (3000 milliseconds) :

setInterval(function(){ alert("Hello"); }, 3000);
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

El setInterval() método llama a una función o evalúa una expresión a intervalos especificados (in milliseconds) .

El setInterval() método continuará llamando a la función hasta clearInterval() se llama, o la ventana está cerrada.

El valor ID devuelto por setInterval() se utiliza como el parámetro para el clearInterval() método.

Tip: 1000 ms = 1 segundo.

Consejo: para ejecutar una función de una sola vez, después de un número especificado de milisegundos, utilice el setTimeout() método.

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
setInterval() 1.0 4.0 1.0 1.0 4.0

Sintaxis

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

Los valores de los parámetros

Parámetro Descripción
function Necesario. La función que se ejecutará
milliseconds Necesario. Los intervalos (in milliseconds) en la frecuencia para ejecutar el código
param1,param2,... Opcional. Parámetros adicionales para pasar a la función (No se admite en IE9 y anterior)

Detalles técnicos

Valor de retorno: Un número, que representa el valor de ID del temporizador que se establece. Utilice este valor con el clearInterval() método para cancelar el temporizador
Ejemplos

Más ejemplos

Ejemplo

También puede hacer referencia a una "named" función; Alerta "Hello" cada 3 segundos (3000 milliseconds) :

var myVar;

function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
    alert("Hello!");
}
Inténtalo tú mismo "

Ejemplo

Mostrar la hora actual (the setInterval() método ejecutará la función una vez cada 1 segundo, al igual que un reloj digital):

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
Inténtalo tú mismo "

Ejemplo

Usando clearInterval() para detener el tiempo en el ejemplo anterior:

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
Inténtalo tú mismo "

Ejemplo

Utilizando setInterval() y clearInterval() para crear una barra de progreso dinámico:

function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
Inténtalo tú mismo "

Ejemplo

Alternar entre dos colores de fondo una vez cada 300 milisegundos:

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
    clearInterval(myVar);
}
Inténtalo tú mismo "

Ejemplo

Pasar parámetros a la función alertFunc (does not work in IE9 and earlier) :

var myVar;

function myStartFunction() {
    myVar = setInterval(alertFunc, 2000, "First param", "Second param");
}
Inténtalo tú mismo "

Sin embargo, si se utiliza una función anónima, que funcionará en todos los navegadores:

var myVar;

function myStartFunction() {
    myVar = setInterval(function(){ alertFunc("First param", "Second param"); }, 2000);
}
Inténtalo tú mismo "

Páginas relacionadas

Ventana del objeto: href="met_win_clearinterval.html"> clearInterval() Method

Objeto Ventana: href="met_win_settimeout.html"> setTimeout() Method

Ventana del objeto: href="met_win_cleartimeout.html"> clearTimeout() Method

<Ventana Object