En el artículo de hoy vamos a ver cómo podemos ejecutar cada X segundos en JavaScript. La idea será que un método se ejecute una vez que hayan pasado, por ejemplo, 5 segundos. Y es que una cosa nos permite JavaScript es dotar de dinamismo a nuestras páginas web. Este dinamismo puede ser desencadenado por dos circunstancias. La primera es que el usuario que interactúa con la web genere un evento. Por ejemplo, pulsar un botón, pasar sobre una imagen… El segundo caso es que las acciones se desencadenen por cuestiones temporales, es decir, pasado un cierto tiempo.

setInterval y setTimeout

Para desencadenar acciones cuando pase un cierto tiempo, JavaScript nos proporciona dos métodos: setInterval() y setTimeout().

En el caso de setInterval() nos permite ejecutar una función de forma repetitiva cada cierto tiempo que especifiquemos. Es decir, podemos indicarle que ejecute una función cada 5 segundos, cada minuto o el intervalo temporal que necesitemos.

Y para el caso de setTimeout() nos permite ejecutar una función una única vez pasado el tiempo que le especifiquemos. Es decir, podemos indicarle que ejecute una función cuando hayan pasado 5 segundos desde que se lo indicamos. La diferencia principal con setInterval() es que setTimeout() solo ejecuta la función una vez, mientras que setInterval() la ejecuta de forma repetitiva.

Formulario para ejecutar cada X segundos en JavaScript

En nuestro ejemplo, en el que vamos a ejecutar cada X segundos en JavaScript vamos a implementar un contador dentro de la página. Está claro que un valor funcional no nos va a aportar, si bien lo que estamos buscando es un valor didáctico y ver cómo funciona el método setInterval().

Lo primero que vamos a crear es un formulario, el cual contenga un campo de texto. En dicho campo de texto, iremos actualizándolo con valores del contador.

<form>
  <label for="contador">Contador:</label>
  <input id="contador" type="text">
</form>

Es importante el darle un id al campo. Ya que este valor será el que nos permita acceder a su contenido, para modificarlo a posteriori.

El contador que será invocado por setInterval

Lo siguiente será definir una función que implemente el contador. Básicamente, esta función obtendrá, vía DOM, el elemento del formulario y volcará sobre él el valor de un contador.

Nuestra función contador() sería la siguiente:

function contador(){
	var contador = document.getElementById("contador");
	contador.value = cont;
	cont++;
}

Hacer notar que mediante el método .getElementById(id) obtenemos el elemento de la página que queremos modificar. El contador deberá de tener un valor inicial. Es por ello que, fuera de la función, le asignaremos el valor. Todo el código JavaScript sería el siguiente:

var cont = 0;
function contador(){
	var contador = document.getElementById("contador");
	contador.value = cont;
	cont++;
}

Creando el primer setInterval

Ya, solo nos quedará el crear el intervalo mediante la función setInterval(). Esta función recibe dos parámetros. El primero será la función que queremos ejecutar cada X segundos. En nuestro caso contador(). El segundo parámetro son los X segundos, si bien, serán expresados en milisegundos.

Por ejemplo, si queremos ejecutar cada 5 segundos en JavaScript el código será el siguiente:

setInterval('contador()',5000);

Solo nos quedará resolver una pregunta. ¿Cuando ejecutar el método setInterval()? Este no lo podemos lanzar antes de definir la función contador, ni antes de que se haya definido cualquier parte de la página que sea modificada por contador (en nuestro caso, el formulario). Es por ello que lo mejor es ejecutarla al final de la página, o mejor dicho, cuando se haya cargado toda la página.

Con esto ya habremos conseguido tener nuestro código que nos permite ejecutar cada X segundos en JavaScript. ¿Qué ejemplos se te ocurren que podrías implementar en tu página web mediante la función setInterval()?