domingo, 1 de marzo de 2009

Función periódica con javascript

En ocasiones es necesario realizar comportamientos javascript en pantalla de forma reiterada cada cierto intervalo de tiempo.

Por ejemplo realizar el refresco de una parte de la página, o esperar a que aparezca algo en pantalla para realizar cierta acción.

En algún caso lo he necesitado, y lo resolví de este modo, teniendo disponible la librería Prototype:
Prueba = {
  atributo1: '',
  atributo2: 1,
  hemosTerminado: false,

  inicializarComportamientoPeriodico: function(){

  new PeriodicalExecuter(

  function actualizacionDeLoQueSea(timer){
//Aquí realizamos las acciones que queramos
  this.atributo1 = this.atributo1 + 'vuelta ' + this.atributo2 + ',';
  this.atributo2 = this.atributo2 + 1;

//Comprobamos la condición de finalización
  this.hemosTerminado = ........

if(this.hemosTerminado)
  timer.stop();

  }.bind(this),
  2
  );
  }
}

Event.observe(window, "load", Prueba.inicializarComportamientoPeriodico.bindAsEventListener(Prueba));

Como vemos tenemos un objeto que hemos llamado Prueba.

Cuando la página se haya cargado llamaremos al método que inicializa nuestra función periódica.
El método que inicializa el comportamiento periódico crea un objeto PeriodicalExecuter que recibe como parámetros:

  • la función que ejecutará (en este caso le pasamos una función que definimos ahí mismo)

  • el intervalo de tiempo en segundos


Observaciones:
- Hay que tener en cuenta que será necesario en esta implementación el uso de bind al pasar la función a PeriodicalExecuter.
- Se ha incluido una condición de parada de las repeticiones que hace que deje de ejecutarse nuestra función.