Plugin jQuery Timer

jQuery es un magnífico framework Javascript que tiene funciones para muchas cosas, como ya hemos podido aprender al leer el Manual de jQuery o practicar con el Taller de jQuery. Sin embargo, los que conozcan este sistema pueden haber echado en falta alguna vez un método, o una colección de ellos, que permita invocar funciones con un retardo o periódicamente.

En este artículo explicaremos cómo a manejar un sencillo plugin que nos puede resultar útil cuando queramos programar todo tipo de acciones que deban ejecutarse cada cierto tiempo. A decir verdad, esas funcionalidades las podríamos realizar con las conocidas funciones nativas de Javascript setTimeout() y setInterval(), pero siempre se agradece el uso de algún otro método que mejore lo existente, y es que los frameworks Javascript están justo para eso, ¿no?

El plugin que vamos a mostrar a través de varios ejemplos lo podemos encontrar en: http://plugins.jquery.com/project/Timer

El plugin recibe el tiempo y la función a ejecutar

El plugin Timer es muy sencillo de utilizar y lo único que debemos enviarle es el tiempo que queremos configurar como intervalo y la función a ejecutar periódicamente. Para invocarlo utilizamos directamente el símbolo dólar, seguido de un punto y el método del plugin "timer".

Seguidamente podemos ver un ejemplo sencillo de uso de Timer.

$.timer(2000, function(){
   alert("hola, pasaron 2 segundos");
})

Ese código mostraría una caja de alerta cada 2000 milisegundos (osea, cada 2 segundos) y se repetiría la acción de manera indefinida, mientras el usuario se encuentre en la página.

Para hacer un simple retraso quizás no representa mucha mejoría, pero luego veremos que nos ofrece algunos métodos adicionales para configurar el sistema temporizador que nos pueden venir muy bien.

Ahora veamos un uso un poco más avanzado, que aprovecha alguna de las funcionalidades que trae jQuery para hacer una animación en la página.

var numero = 0;
$.timer(125, function(temporizador){
   numero ++;
   $("#elemento").html(numero);
   $("#elemento").css({
      "font-size": (numero + "px")
   });
})

En este ejemplo definimos una variable llamada "numero" que nos sirve como contador. Luego definimos un intervalo de 125 milisegundos y una función a ejecutar que incrementa el contador, y actualiza una capa con id="elemento". Como se puede ver, mediante la función se actualiza el contenido HTML de esa capa y el estilo font-size para cambiar el tamaño de la letra.

Podemos ver el ejemplo en marcha en una página aparte.

Nuevamente, se trata de un ejemplo muy sencillo, pero vemos que nos permite trabajar con intervalos y permanecer utilizando una estructura de código fuente como las que estamos acostumbrados a usar dentro de jQuery.

Ahora os proponemos un segundo ejemplo de uso de timer, en el que se modifica la anchura de una capa, con una animación, entre dos valores.

var abierto = true;
$.timer(1000, function(temporizador){
   if (abierto){
      $("#capapruebas").animate({
         width: 10
      })
   }else{
      $("#capapruebas").animate({
         width: 100
      })
   }
   abierto = !abierto;
})

En este código definimos una variable abierto, a la que se le asigna el valor true. Luego, en la función que se ejecuta cada segundo (intervalo de 1000 milisegundos), se comprueba el valor de esa variable y se hace una animación para modificar la anchura de esa capa entre los valores 10 (cuando la variable abierto está a true) y 100 (cuando abierto = false). La función acaba cambiando el valor de abierto a través de una negación.

Podemos ver esta animación en este enlace.

Método stop() para detener la ejecución

Como decía, el plugin timer acepta algún método para configurar la ejecución del intervalo. El primero es stop(), que simplemente detiene la ejecución.

$.timer(500, function (temporizador) {
   alert("Me ejecutaré una única vez");
   temporizador.stop();
});

Esto hace que en medio segundo se muestre una caja de alerta con un mensaje dado y que a continuación se cancele el intervalo. Por ello este mensaje de alert() solamente se llegará a ejecutar una única vez.

Método reset() para alterar el temporizador

Por medio del método reset() se invoca de nuevo el proceso del temporizador, pero asignando un nuevo tiempo para el intervalo de ejecución. El uso es bien simple, como podemos ver en el siguiente código.

var retardo = 1000;
$.timer(retardo, function(temporizador){
   $("#capapruebas").html("Se produjo un retardo de " + (retardo/1000) + " segundos");
   if (retardo>=5000){
      $("#capapruebas").html("Terminé!!!");
      temporizador.stop();
   }else{
      retardo += 1000;
      temporizador.reset(retardo);
   }
})

En resumen, lo que se hace aquí es varias llamadas al temporizador, pero en cada una de ellas el retardo se ha incrementado en 1 segundo. Al quinto retardo producido se muestra un mensaje y se para el temporizador.

El ejemplo se encuentra accediendo a este enlace.

Para explicarlo con un poco más de calma, empieza por crearse una variable con el valor 1000. Esa variable la utilizamos para llevar el tiempo de retardo que queremos colocar en el temporizador. Se podrá entender que, en la primera llamada a timer, le pasamos un tiempo de 1000 milisegundos.

Luego en la función a ejecutar en cada intervalo se altera el texto de la capa id="capapruebas", mostrando el retardo que se ha producido desde la última ejecución del temporizador, y luego se realiza una evaluación del retardo que se ha producido en la última llamada.

Si el retardo que llevamos era mayor o igual a 5000, simplemente paramos la ejecución y mostramos un mensaje. Si no, aumentamos el retardo en un segundo y llamamos de nuevo al temporizador asignando un nuevo retardo.

Como vemos, la llamada a reset() para alterar el intervalo se realiza mediante la variable "temporizador" que hemos recibido como parámetro automáticamente en la función que se ejecuta en cada intervalo, igual que ocurre con stop().

Conclusión

Quizás no es de los plugins más espectaculares de jQuery, ni mucho menos, pero sí que se trata de un plugin bastante versátil. En principio no sirve para hacer ningún efecto específico, pero nos servirá como complemento para automatizar muchas tareas dentro de jQuery. En el futuro haremos algún plugin que haga uso de este componente.