JavaScript » Ejecutar cada X segundos en JavaScript
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.
<form> <label for="contador">Contador:</label> <input type="text" id="contador"> </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.
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:
<script type="text/javascript"> var cont = 0; function contador(){ var contador = document.getElementById("contador"); contador.value = cont; cont++; } </script>
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:
<body onLoad="setInterval('contador()',1000);">
 Error en el código |
 Foro sobre Javascript |
Artículos relacionados:
Noviembre 11, 2007 #
hola esta muy bien el codigo pero me pudieran ayudar? ando buscando un contador de visitas en javascript para mi pagina q esta en c#. Es muy importante.
De antemano gracias
Noviembre 19, 2007 #
[...] Este artículo es un complemento a Ejecutar cada X segundos en JavaScript. Mientras que en el primer artículo veíamos como utilizar el método JavaScript setInterval para ejecutar una función cada X segundos de forma repetitiva, en este vemos como ejecutar una función a los X segundos. Para ello nos apoyaremos en la función JavaScript setTimeout. [...]
Agosto 26, 2008 #
Muchas Gracias fue muy util su articulo para mi
Octubre 23, 2008 #
Gracias, fue muy util.
Febrero 3, 2010 #
y cuando quiero que se detenga… o que ya no realice mas el ciclo… como hago ?
Junio 29, 2010 #
Hey muchas Gracias me mega sirvio y funciono para lo que necesitaba, me ahorre mucho codigo con esta funcion =)
Enero 19, 2011 #
Gracias, me ah funcionado mucho
Enero 19, 2011 #
@Moises Narvaez,
Para pararlo tendrías que tener en algún punto o mediante alguna acción que se lanzase un
setInterval(‘contador()’,0);
Enero 19, 2011 #
@Roxana, @Ivan,
Me alegro que les haya servido.
Enero 19, 2011 #
gracias, en su momento lo solucioné así:
var intval = “”;
function start_Int(){
intval=window.setInterval(“haga_algo()”,5);
}
function stop_Int(){
if(intval!=”"){
window.clearInterval(intval);
intval=”";
}
}