107510173 Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press

138

Fundamentos de JavaScript y AJAX para desarrolladores y diseñadores web

Primero se definen tres variables globales que es necesario compartir entre varias funciones que vamos a crear. Acto seguido se define la función comezarParar . Dado que ésta va a tener un doble propósito se hace divide su lógica entre dos ramas de un condicional. Vamos a fijarnos antes de nada en la rama de “arrancar” que es la del else. Lo que se hace es guardar en una variable local auxiliar ( tDescuento) el tiempo seleccionado por el usuario en la lista desplegable, convirtiéndolo en un número entero antes, con parseInt . Este es un tiempo en minutos. A continuación se averigua la fecha y hora actuales, guardándolas de momento en la variable global dObjetivo que contendrá la fecha y hora destino en la que la cuenta regresiva deberá detenerse. Como debemos contar (más bien descontar) el número de minutos elegido por el usuario, la fecha objetivo será igual a la actual más esos minutos elegidos por el usuario. Para poder sumar esos minutos a la hora actual hacemos uso del método setMinutes, para lo cual le sumamos a los minutos actuales ( getMinutes) el tiempo que queremos descontar. Por ejemplo, si ahora son las 20:00:00 y queremos contar 5 minutos, le sumamos esos 5 minutos a la parte de minutos de la hora actual. Así, para saber el tiempo que ha transcurrido sólo debemos restar de esa hora “objetivo” la hora

actual. A las 20:05:00 sabremos que el contador ha terminado y debemos detenerlo. Nota:

No debemos preocuparnos de si lo que sumamos con setMinutes sobrepasa los 60 minutos, ya que como hemos visto la clase  Date es suficientemente inteligente para adaptarse. Así que si son las 20:55 y le sumamos 10 minutos a los minutos (es decir, le diríamos que queremos las 20:65) la hora resultante son las 21:05 ya que se recalcula todo automáticamente. Es importante hacer estas sumas y restas con la fecha completa (como de hecho lo estamos haciendo) porque podemos comenzar la cuenta cerca de las 00:00 de la noche y si sólo consideráramos la hora nos conduciría a errores. Ahora que ya sabemos la hora objetivo lo único que hacemos es cambiar el texto del botón para que ponga “Parar”, pintamos el tiempo inicial (con una función  pintarTiempo que no es interesante para el propósito de este ejemplo) y lanzamos un temporizador que llamará cada 900 ms a una función llamada tick .

Fíjate en que se almacena el identificador del temporizador en la variable global idTimer . Con este identificador global conseguimos dos cosas: poder parar el temporizador cuando queramos, y averiguar si está actualmente en marcha o no (es la condición del if  con el que comienza la función). Si está parado se hace lo que acabamos de ver, y si está en marcha se detiene con una llamada a clearTimer , dejando el resto de elementos comoestaban. La función tick  tiene el siguiente aspecto: