Si una cosa nos permite JavaScript es el de dotar dinamismo a nuestras páginas web. Este dinamismo puede ser desencadenado por dos circunstancias. La primera es que el usuario que interactua 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.
Para este segundo caso, JavaScript nos proporciona de dos métodos setInterval y setTimeout. La primera, y en la que nos centraremos en este ejemplo, permite ejecutar una función cada cierto tiempo de una forma iterativa. Por otro lado, la segunda ejecuta una función pasado un tiempo.
En nuestro ejemplo vamos a implementar un contador dentro de la página. Esta claro que un valor funcional no nos va a aportar, si bien, lo que estamos buscando es un valor didáctico y ver como 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.
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.
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 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:
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 el contador, cada 1 segundo, el código JavaScript será el siguiente:
setInterval('contador()',1000);Solo nos quedará resolver una pregunta. ¿Cuando ejecutar el setInterval?. Este no le 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.
Es por ello, que ejecutaremos el setInterval en el método onLoad de nuestra página. Quedándonos el siguiente código:
