Tengo esta página web con una imagen de "Oh noes",
que está anunciando que el mundo se va a terminar pronto,
específicamente en 500 segundos.
Quiero hacer que esta página web sea más útil,
cambiando este número a una cuenta regresiva en vivo,
de manera que los visitantes puedan ver exactamente cuánto tiempo les queda.
Ahora, cuando animamos una parte de una página web,
la estrategia es encontrar en ella algún elemento,
luego cambiar algo de ese elemento,
y hacer eso un cierto número de veces por segundo.
Así que para el primer paso, voy a encontrar el "countdown" por "Id". (La cuenta regresiva).
Sencillo.
'var countdown = document.getElementById("countdown");'
En el segundo paso, voy a escribir una función que haga un conteo regresivo.
'var countItDown = funtion() {'...
Y lo que vamos a hacer...
Quiero definir el "textContent", y lo quiero definir como
el número previo menos uno.
Y el "textContent" en realidad es una cadena de caracteres,
así que lo tenemos que cambiar a un número.
Podemos hacer eso usando "parsefloat()".
Y luego le podemos restar uno.
Ok, finalmente, queremos llamar esta función en un intervalo,
lo que significa: un cierto número de veces por segundo.
Y podemos hacer eso usando "window.setInterval()".
Y esta función tiene dos argumentos:
la función "callback" y el número de milisegundos que tiene que esperar
antes de que la función se llame otra vez.
Podemos especificar la función de tipo "callback"
de la misma manera que lo hicimos con los detectores de eventos: por nombre.
Y luego... en realidad ahora está corriendo muy rápido,
porque no le hemos especificado el segundo argumento,
así que para eso, queremos que sea un cierto número de milisegundos,
y queremos que se llame una vez por segundo, así que vamos a escribir: 1000,
porque hay 1000 milisegundos en un segundo.
Aquí vamos, ahora está contando una vez por segundo.
¡Así que será mejor que aprendas lo más que puedas en los próximos 490 segundos!
Hay una función más de "window" que usamos algunas veces en lugar de "setInterval",
y es "setTimeout".
Y sólo la voy cambiar aquí, a ver si puedes ver la diferencia.
Tenemos que esperar un segundo.
Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",
el navegador sólo llama la función una vez, y no repetidamente.
Esto no es tan útil cuando estamos haciendo animaciones.
Pero puede ser muy útil en otros casos,
como cuando mostramos una bandera de advertencia, y luego la queremos
ocultar después de 10 segundos.
Así que déjenme regresar esto a "setInterval".
Ahora, cuando estamos probando animaciones como ésta,
en realidad, deberíamos ver cómo funciona en todos los puntos de la animación,
como cuando llega a cero.
Bueno, va a tomar mucho tiempo para llegar a cero,
y vas a estar muy aburrido, así que
vamos a cambiar el dato inicial a 5,
y ver qué pasa.
Cuatro, tres, dos, uno, cero...
uno negativo, dos negativo.
Ok, ahora se ve un poco raro.
Cuando el mundo se acaba, simplemente debería hacer ¡Kaboom! y dejar de contar.
Así que lo que queremos hacer en realidad, es detener esta animación,
una vez que llegue a cero.
Y podemos hacer eso usando una condición "if" dentro de la función.
Así que déjenme empezar por guardar el segundo actual en una variable,
porque lo vamos a usar algunas veces.
Así que voy a copiar esto y ponerlo aquí,
y reemplazar esto con "currentTime".
Ahora lo que puedo hacer es poner una condición "if"
que nos asegure que sólo actualizará el texto si "currentTime" es mayor que cero.
Que es en realidad, cuando queremos que reste uno.
Entonces necesito mover esto aquí dentro.
Esto funciona, pero en realidad hay algo mal en este enfoque.
El navegador sigue llamando a la función "countItDown" una vez por segundo
en tanto que esta página web está abierta.
No deberías hacer que los navegadores llamaran funciones sin razón,
ellos tienen muchas otras cosas importantes que hacer.
Lo que en realidad queremos hacer es decirle al navegador que
una vez que llegue a cero, no necesita llamar a esta función ni una vez más.
Podemos hacer eso usando un nuevo método: "window.clearInterval()".
Podemos pegar eso en este "else", aquí, "window.clearInterval()".
Ahora, necesitamos pasarle un argumento, para que sepa cuál intervalo debe limpiar.
Porque en realidad podríamos tener múltiples intervalos en un página.
La manera de saber cuál intervalo limpiar
es guardar el resultado de "setInterval" en una variable.
Así que ahora que tengo el resultado en la variable "timer", puedo copiar y pegaralo allí,
y ahora ya sabe qué limpiar, cuando llegue a cero,
debe dejar de actualizar, y debe dejar de llamar a la función.
Para cada animación que hagan, deben pensar cuidadosamente
cuál debería ser la condición para detenerse.
Y sí, probablemente tengan algunas animaciones que deberían correr y correr, amigos,
pero más vale que sean animaciones realmente buenas.
Porque el navegador estará trabajando cada vez que llamen esa función de tipo "callback".
Ahora den vuelta a la página y logren que el mundo haga ¡Kaboom!