0:00:00.639,0:00:03.875
Tengo esta página web con una imagen de "Oh noes",

0:00:03.875,0:00:07.862
que está anunciando que el mundo se va a terminar pronto,

0:00:07.862,0:00:10.473
específicamente en 500 segundos.

0:00:10.473,0:00:13.356
Quiero hacer que esta página web sea más útil,

0:00:13.356,0:00:16.934
cambiando este número a una cuenta regresiva en vivo,

0:00:16.934,0:00:20.781
de manera que los visitantes puedan ver exactamente cuánto tiempo les queda.

0:00:20.781,0:00:23.934
Ahora, cuando animamos una parte de una página web,

0:00:23.934,0:00:26.708
la estrategia es encontrar en ella algún elemento,

0:00:26.708,0:00:29.303
luego cambiar algo de ese elemento,

0:00:29.303,0:00:32.779
y hacer eso un cierto número de veces por segundo.

0:00:32.779,0:00:37.693
Así que para el primer paso, voy a encontrar el "countdown" por "Id". (La cuenta regresiva).

0:00:37.693,0:00:39.700
Sencillo.

0:00:39.700,0:00:47.377
'var countdown = document.getElementById("countdown");'

0:00:47.536,0:00:51.612
En el segundo paso, voy a escribir una función que haga un conteo regresivo.

0:00:51.612,0:00:54.588
'var countItDown = funtion() {'...

0:00:54.588,0:00:56.856
Y lo que vamos a hacer...

0:00:56.856,0:01:01.217
Quiero definir el "textContent", y lo quiero definir como

0:01:01.217,0:01:03.755
el número previo menos uno.

0:01:03.755,0:01:06.798
Y el "textContent" en realidad es una cadena de caracteres,

0:01:06.798,0:01:09.947
así que lo tenemos que cambiar a un número.

0:01:09.947,0:01:12.853
Podemos hacer eso usando "parsefloat()".

0:01:12.853,0:01:15.753
Y luego le podemos restar uno.

0:01:15.753,0:01:21.541
Ok, finalmente, queremos llamar esta función en un intervalo,

0:01:21.541,0:01:25.328
lo que significa: un cierto número de veces por segundo.

0:01:25.328,0:01:30.415
Y podemos hacer eso usando "window.setInterval()".

0:01:30.415,0:01:33.691
Y esta función tiene dos argumentos:

0:01:33.691,0:01:38.096
la función "callback" y el número de milisegundos que tiene que esperar

0:01:38.096,0:01:40.885
antes de que la función se llame otra vez.

0:01:40.885,0:01:43.369
Podemos especificar la función de tipo "callback"

0:01:43.369,0:01:46.809
de la misma manera que lo hicimos con los detectores de eventos: por nombre.

0:01:46.809,0:01:49.640
Y luego... en realidad ahora está corriendo muy rápido,

0:01:49.640,0:01:51.827
porque no le hemos especificado el segundo argumento,

0:01:51.827,0:01:55.250
así que para eso, queremos que sea un cierto número de milisegundos,

0:01:55.250,0:01:58.520
y queremos que se llame una vez por segundo, así que vamos a escribir: 1000,

0:01:58.520,0:02:01.558
porque hay 1000 milisegundos en un segundo.

0:02:01.558,0:02:05.218
Aquí vamos, ahora está contando una vez por segundo.

0:02:05.218,0:02:10.245
¡Así que será mejor que aprendas lo más que puedas en los próximos 490 segundos!

0:02:10.245,0:02:15.036
Hay una función más de "window" que usamos algunas veces en lugar de "setInterval",

0:02:15.036,0:02:17.227
y es "setTimeout".

0:02:17.227,0:02:21.782
Y sólo la voy cambiar aquí, a ver si puedes ver la diferencia.

0:02:21.782,0:02:23.681
Tenemos que esperar un segundo.

0:02:23.681,0:02:28.297
Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",

0:02:28.297,0:02:33.881
el navegador sólo llama la función una vez, y no repetidamente.

0:02:33.881,0:02:38.705
Esto no es tan útil cuando estamos haciendo animaciones.

0:02:38.705,0:02:41.732
Pero puede ser muy útil en otros casos,

0:02:41.732,0:02:45.866
como cuando mostramos una bandera de advertencia, y luego la queremos

0:02:45.866,0:02:48.090
ocultar después de 10 segundos.

0:02:48.090,0:02:52.894
Así que déjenme regresar esto a "setInterval".

0:02:52.894,0:02:56.507
Ahora, cuando estamos probando animaciones como ésta,

0:02:56.507,0:03:00.410
en realidad, deberíamos ver cómo funciona en todos los puntos de la animación,

0:03:00.410,0:03:02.460
como cuando llega a cero.

0:03:02.460,0:03:05.258
Bueno, va a tomar mucho tiempo para llegar a cero,

0:03:05.258,0:03:07.206
y vas a estar muy aburrido, así que

0:03:07.206,0:03:10.581
vamos a cambiar el dato inicial a 5,

0:03:10.581,0:03:12.538
y ver qué pasa.

0:03:12.538,0:03:16.732
Cuatro, tres, dos, uno, cero...

0:03:16.732,0:03:19.289
uno negativo, dos negativo.

0:03:19.289,0:03:21.878
Ok, ahora se ve un poco raro.

0:03:21.878,0:03:26.292
Cuando el mundo se acaba, simplemente debería hacer ¡Kaboom! y dejar de contar.

0:03:26.292,0:03:30.111
Así que lo que queremos hacer en realidad, es detener esta animación,

0:03:30.111,0:03:32.734
una vez que llegue a cero.

0:03:32.734,0:03:36.319
Y podemos hacer eso usando una condición "if" dentro de la función.

0:03:36.319,0:03:42.227
Así que déjenme empezar por guardar el segundo actual en una variable,

0:03:42.227,0:03:44.517
porque lo vamos a usar algunas veces.

0:03:44.517,0:03:47.513
Así que voy a copiar esto y ponerlo aquí,

0:03:47.513,0:03:51.273
y reemplazar esto con "currentTime".

0:03:51.273,0:03:55.564
Ahora lo que puedo hacer es poner una condición "if"

0:03:55.564,0:04:01.097
que nos asegure que sólo actualizará el texto si "currentTime" es mayor que cero.

0:04:01.097,0:04:04.938
Que es en realidad, cuando queremos que reste uno.

0:04:04.938,0:04:10.497
Entonces necesito mover esto aquí dentro.

0:04:10.497,0:04:15.012
Esto funciona, pero en realidad hay algo mal en este enfoque.

0:04:15.012,0:04:19.444
El navegador sigue llamando a la función "countItDown" una vez por segundo

0:04:19.444,0:04:21.559
en tanto que esta página web está abierta.

0:04:21.559,0:04:24.842
No deberías hacer que los navegadores llamaran funciones sin razón,

0:04:24.842,0:04:27.581
ellos tienen muchas otras cosas importantes que hacer.

0:04:27.581,0:04:30.935
Lo que en realidad queremos hacer es decirle al navegador que

0:04:30.935,0:04:35.585
una vez que llegue a cero, no necesita llamar a esta función ni una vez más.

0:04:35.585,0:04:40.384
Podemos hacer eso usando un nuevo método: "window.clearInterval()".

0:04:40.384,0:04:47.354
Podemos pegar eso en este "else", aquí, "window.clearInterval()".

0:04:47.354,0:04:52.189
Ahora, necesitamos pasarle un argumento, para que sepa cuál intervalo debe limpiar.

0:04:52.189,0:04:55.799
Porque en realidad podríamos tener múltiples intervalos en un página.

0:04:55.799,0:04:58.902
La manera de saber cuál intervalo limpiar

0:04:58.902,0:05:02.983
es guardar el resultado de "setInterval" en una variable.

0:05:02.983,0:05:07.816
Así que ahora que tengo el resultado en la variable "timer", puedo copiar y pegaralo allí,

0:05:07.816,0:05:11.122
y ahora ya sabe qué limpiar, cuando llegue a cero,

0:05:11.122,0:05:15.571
debe dejar de actualizar, y debe dejar de llamar a la función.

0:05:15.571,0:05:19.332
Para cada animación que hagan, deben pensar cuidadosamente

0:05:19.332,0:05:21.695
cuál debería ser la condición para detenerse.

0:05:21.695,0:05:26.132
Y sí, probablemente tengan algunas animaciones que deberían correr y correr, amigos,

0:05:26.132,0:05:29.023
pero más vale que sean animaciones realmente buenas.

0:05:29.023,0:05:33.514
Porque el navegador estará trabajando cada vez que llamen esa función de tipo "callback".

0:05:33.514,0:05:37.514
Ahora den vuelta a la página y logren que el mundo haga ¡Kaboom!