Ejecutar cada X segundos en JavaScript

31/Oct/2007 JavaScript , , , , 15 Comentarios

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.

  1. <label for="contador">Contador:</label><input type="text" id="contador">
  2. </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:

  1. function contador(){
  2. var contador = document.getElementById("contador");
  3. contador.value = cont;
  4. cont++;
  5. }

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:

  1. <script type="text/javascript">
  2. var cont = 0;
  3. function contador(){
  4. var contador = document.getElementById("contador");
  5. contador.value = cont;
  6. cont++;
  7. }
  8. </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:

  1. 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:

  1. <body onLoad="setInterval('contador()',1000);">

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

15 comentarios en “Ejecutar cada X segundos en JavaScript”

Víctor Cuervo

Bea

Buenos días,
Existe la posibilidad de recargar la jsp en función de una condición? Es decir, en vez de refrescarla cada X tiempo, refrescarla siempre que se cumpla una condición. Esta condición quedará determinada en otra parte del código; en el momento que se cumpla meterá en sesión un flag. Resumiendo: quiero que la jsp se recargue siempre que se cumpla ese flag.

Muchas gracias,

Un saludo

Víctor Cuervo

Víctor Cuervo

Bea,

Con el siguiente código:

setInterval('contador()',1000);

Estás ejecutando la función contador() cada 1 sg. Lo que tienes que hacer dentro de la función contador() es chequear la condición que te interese o no. Y en ese momento recargar la pagina.

function contador() {
  if (condicion) {
    // Recargar
  }
}

Espero que te oriente.

Saludos.

Víctor Cuervo

cinedhoy

hola yo quisiera saber como hacer que esos numeros se queden guardados, me explico. este codigo si el usuario sale de la pagina y vuelve a entrar se vuelve a 0, yo quisiera que siga contando y si el usuario sale y entra este no haya perdido la cantidad contada. Es como si fuera relog automatico de la vida del blog desde el momento que pong el script

Víctor Cuervo

Víctor Cuervo

cinedhoy, puedes ir guardándolos en una caché local.
Tienes un ejemplo de cómo utilizarla en http://lineadecodigo.com/html5/acceder-a-la-cache-local-del-navegador-con-html5/

Espero que te sirva de ayuda. Saludos.

Víctor Cuervo

Elio

Gracias

Víctor Cuervo

lineadecodigo

@Moises Narvaez,

Sí, mucho mejor con clearInterval()
😀

Víctor Cuervo

Moises Narvaez

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=””;
}
}

Víctor Cuervo

lineadecodigo

@Roxana, @Ivan,

Me alegro que les haya servido. 😀

Víctor Cuervo

lineadecodigo

@Moises Narvaez,

Para pararlo tendrías que tener en algún punto o mediante alguna acción que se lanzase un
setInterval(‘contador()’,0);

Víctor Cuervo

Ivan

Gracias, me ah funcionado mucho

Víctor Cuervo

Roxana

Hey muchas Gracias me mega sirvio y funciono para lo que necesitaba, me ahorre mucho codigo con esta funcion =)

Víctor Cuervo

Moises Narvaez

y cuando quiero que se detenga… o que ya no realice mas el ciclo… como hago ?

Víctor Cuervo

Kenichi

Gracias, fue muy util.

Víctor Cuervo

roberth navarro

Muchas Gracias fue muy util su articulo para mi

Víctor Cuervo

selene

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*