Intervalos y timeouts en JavaScript

Intervalos y timeouts en javaScript

En este tutorial aprenderemos cómo utilizar los métodos de JavaScript para generar procesos repetitivos con setInterval y aplazar procesos con setTimeout.

El método setInterval

Ejemplo de uso

// Hará un console log cada 5 segundos (5000 milisegundos)
setInterval(function(){
    console.log("Han pasado 5 segundos")
},5000);

Si lo que se va a ejecutar en cada intervalo es un método podemos definirlo de esta forma

El proceso generado por el método setInterval se estará ejecutando mientras no se cierre la página.

Para detener este proceso manualmente tendremos que hacer uso del método clearInterval

El método clearInterval

// Método
function mostrarConsoleLog(){
    console.log("Han pasado 5 segundos");
}
// Llamará al método cada 5 segundos
setInterval(mostrarConsoleLog, 5000);

Veamos un ejemplo

// Definición del intervalo
var intervalo = setInterval(mostrarConsoleLog, 5000);
// Método
function mostrarConsoleLog(){
    console.log("Han pasado 5 segundos");
}
// Método para detener el intervalo
function stopIntervalo(){
    clearInterval(intervalo);
}

El método setTimeout

Ejemplo de uso

// Hará un console después de 5 segundos (5000 milisegundos)
setTimeout(function(){
    console.log("Han pasado 5 segundos");
}, 5000);

Como ocurre con el método setInterval, también lo podemos usar de esta forma

// Método
function mostrarConsoleLog(){
    console.log("Han pasado 5 segundos");
}
// Llamará al método después de 5 segundos
setTimeout(mostrarConsoleLog, 5000);

Una vez que el timeout está definido, si queremos detenerlo y que no ejecute las instrucciones que tiene programadas, podremos utilizar el método clearTimeout

El método clearTimeout

Veamos un ejemplo

// Método
function mostrarConsoleLog(){
    console.log("Han pasado 5 segundos");
}
// Llamará al método después de 5 segundos (5000 milisegundos)
var miTimeOut = setTimeout(mostrarConsoleLog, 5000);

// Método para detener el timeout y que no ejecute sus instrucciones
// Por supuesto habrá que llamarlo antes de 5 segundos, sinó no hará nada
function stopTimeOut(){
    clearTimeout(miTimeOut);
}

Más tutoriales de JavaScript

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo