Crear un cronómetro con la clase Timer en AS3

En Actionscript 3 la clase Timer, es la alternativa ideal al setInterval de AS2. Aunque podemos seguir utilizando setInterval en AS3, la clase Timer ofrece gran ventaja sobre setInterval porque podemos indicarle cuántas veces queremos que ejecute la acción, con lo que no tendremos que eliminar el intervalo con clearInterval().


Sintaxis:

Si deseamos que la acción se ejecute infinitas veces, escribimos 0 en el número de repeticiones.

Código :

var  temporizador:Timer  =  new Timer(500, 0) 

Al temporizador habrá que añadirle por lo menos un listener, el mismo que ejecutará la función indicada en cada período. Este listener detectará el evento TIMER.


Sintaxis:

Código :

temporizador.addEventListener(TimerEvent.TIMER, cadaPeriodo); 
 function cadaPeriodo(evt:TimerEvent){
      // aca tus acciones
  }

cadaPeriodo es la función que se ejecutará en cada intervalo de tiempo.

La clase Timer posee también otro evento: TIMER_COMPLETE, que detecta cuándo se han cumplido todas las repeticiones.

Sintaxis:

Código :

temporizador.addEventListener(TimerEvent.TIMER_EVENT, alTerminar); 
 function alTerminar(evt:TimerEvent){
      // aca tus acciones
 }

alTerminar es la función que se ejecutará al finalizar todas las repeticiones.

¿Y en qué momento empezará a correr el temporizador? Cuando ejecutemos el método start.

Sintaxis:

Código :

temporizador.start();

Es en este momento que se empieza a ejecutar la función cadaPeriodo en todas las repeticiones indicadas, situación que se detendrá cuando alcance el número de repeticiones indicado al momento de crear el temporizador o cuando llamemos al método stop.

Sintaxis:

Código :

temporizador.stop();

El método stop detiene el temporizador. Cuando se realiza una llamada start() después de stop(), la instancia del temporizador se ejecuta durante el número restantes de repeticiones.

¿Podemos resetear el temporizador? Claro que sí. El método reset detiene el temporizador (si está en ejecución) y restablece el número de repeticiones de nuevo como 0. Posteriormente, cuando se realiza una llamada a start(), el temporizador ejecuta el número especificado de repeticiones establecidos inicialmente.

Ahora estamos en condiciones de utilizar la clase Timer para crear un sencillo cronómetro. ¡Manos a la obra!

Crear un cronómetro con la clase Timer

Situación: Vamos a construir un sencillo cronómetro con botones de Empezar, Detener y Reiniciar. El cronómetro marcará el tiempo cada segundo (1000 milisegundos).

Ahora veremos la clase Timer en acción, con el siguiente código y su explicación:

Código :

import fl.controls.Button;
import flash.text.TextField;

//creamos los textfield
var hora_txt:TextField = new TextField();
hora_txt.x = 50;
hora_txt.y = 50;
hora_txt.width = 150;
hora_txt.height = 30;
hora_txt.border = true;
hora_txt.text = "0h : 0m : 0s";
addChild(hora_txt);

//añadimos los botones de control
var empezar_btn:Button = new Button();
empezar_btn.x = 50;
empezar_btn.y = 90;
empezar_btn.label = "Empezar";
addChild(empezar_btn);

var detener_btn:Button = new Button();
detener_btn.x = 50;
detener_btn.y = 120;
detener_btn.label = "Detener";
addChild(detener_btn);

var reiniciar_btn:Button = new Button();
reiniciar_btn.x = 50;
reiniciar_btn.y = 150;
reiniciar_btn.label = "Reiniciar";
addChild(reiniciar_btn);

/*creamos una variable de tipo Timer.
Intervalo 100 milisegundo = 1 décima de segundo.
0 para indicar ilimitado número de veces*/
var temporizador:Timer = new Timer(1000, 0);

/*asignamos un Listener al temporizados para el evento TIMER
y que ejecute la acción marcaHora*/
temporizador.addEventListener(TimerEvent.TIMER, marcaHora);

/*Definimos la función que utilizaremos
cada décima de segundo. Esta función nos permite obtener
la hora actual y mostrarla en un textfield.*/
var tiempo:uint = 0; //esta variable cuenta el tiempo
function marcaHora(event:TimerEvent):void
{
   //convertimos a hora, minutos, segundo
   var hora:uint = Math.round(tiempo/3600);
   var residuo:uint = tiempo%3600;
   var minutos:uint = Math.round(residuo/60);
   residuo = residuo%60;
   var segundos:uint = residuo;
   hora_txt.text = hora + "h : " + minutos + "m : " + segundos + "s";
   tiempo++;
}

//Ahora las funciones que harán funcionar el cronómetro
empezar_btn.addEventListener(MouseEvent.CLICK,empezar);
detener_btn.addEventListener(MouseEvent.CLICK,detener);
reiniciar_btn.addEventListener(MouseEvent.CLICK,reiniciar);

function empezar(evt:MouseEvent){
    temporizador.start();
}
function detener(evt:MouseEvent){
    temporizador.stop();
}
function reiniciar(evt:MouseEvent){
    temporizador.reset();
    hora_txt.text = "0h : 0m : 0s";
    tiempo = 0;
}

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.