WEBVTT

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

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

00:00:07.862 --> 00:00:10.473
específicamente en 500 segundos.

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

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

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

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

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

00:00:26.708 --> 00:00:29.303
luego cambiar algo de ese elemento,

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

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

00:00:37.693 --> 00:00:39.700
Sencillo.

00:00:39.700 --> 00:00:47.377
'var countdown = document.getElementById("countdown");'

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

00:00:51.612 --> 00:00:54.588
'var countItDown = funtion() {'...

00:00:54.588 --> 00:00:56.856
Y lo que vamos a hacer...

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

00:01:01.217 --> 00:01:03.755
el número previo menos uno.

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

00:01:06.798 --> 00:01:09.947
así que lo tenemos que cambiar a un número.

00:01:09.947 --> 00:01:12.853
Podemos hacer eso usando "parsefloat()".

00:01:12.853 --> 00:01:15.753
Y luego le podemos restar uno.

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

00:01:21.541 --> 00:01:25.328
lo que significa: un cierto número de veces por segundo.

00:01:25.328 --> 00:01:30.415
Y podemos hacer eso usando "window.setInterval()".

00:01:30.415 --> 00:01:33.691
Y esta función tiene dos argumentos:

00:01:33.691 --> 00:01:38.096
la función "callback" y el número de milisegundos que tiene que esperar

00:01:38.096 --> 00:01:40.885
antes de que la función se llame otra vez.

00:01:40.885 --> 00:01:43.369
Podemos especificar la función de tipo "callback"

00:01:43.369 --> 00:01:46.809
de la misma manera que lo hicimos con los detectores de eventos: por nombre.

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

00:01:49.640 --> 00:01:51.827
porque no le hemos especificado el segundo argumento,

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

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

00:01:58.520 --> 00:02:01.558
porque hay 1000 milisegundos en un segundo.

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

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

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

00:02:15.036 --> 00:02:17.227
y es "setTimeout".

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

00:02:21.782 --> 00:02:23.681
Tenemos que esperar un segundo.

00:02:23.681 --> 00:02:28.297
Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",

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

00:02:33.881 --> 00:02:38.705
Esto no es tan útil cuando estamos haciendo animaciones.

00:02:38.705 --> 00:02:41.732
Pero puede ser muy útil en otros casos,

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

00:02:45.866 --> 00:02:48.090
ocultar después de 10 segundos.

00:02:48.090 --> 00:02:52.894
Así que déjenme regresar esto a "setInterval".

00:02:52.894 --> 00:02:56.507
Ahora, cuando estamos probando animaciones como ésta,

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

00:03:00.410 --> 00:03:02.460
como cuando llega a cero.

00:03:02.460 --> 00:03:05.258
Bueno, va a tomar mucho tiempo para llegar a cero,

00:03:05.258 --> 00:03:07.206
y vas a estar muy aburrido, así que

00:03:07.206 --> 00:03:10.581
vamos a cambiar el dato inicial a 5,

00:03:10.581 --> 00:03:12.538
y ver qué pasa.

00:03:12.538 --> 00:03:16.732
Cuatro, tres, dos, uno, cero...

00:03:16.732 --> 00:03:19.289
uno negativo, dos negativo.

00:03:19.289 --> 00:03:21.878
Ok, ahora se ve un poco raro.

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

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

00:03:30.111 --> 00:03:32.734
una vez que llegue a cero.

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

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

00:03:42.227 --> 00:03:44.517
porque lo vamos a usar algunas veces.

00:03:44.517 --> 00:03:47.513
Así que voy a copiar esto y ponerlo aquí,

00:03:47.513 --> 00:03:51.273
y reemplazar esto con "currentTime".

00:03:51.273 --> 00:03:55.564
Ahora lo que puedo hacer es poner una condición "if"

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

00:04:01.097 --> 00:04:04.938
Que es en realidad, cuando queremos que reste uno.

00:04:04.938 --> 00:04:10.497
Entonces necesito mover esto aquí dentro.

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

00:04:15.012 --> 00:04:19.444
El navegador sigue llamando a la función "countItDown" una vez por segundo

00:04:19.444 --> 00:04:21.559
en tanto que esta página web está abierta.

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

00:04:24.842 --> 00:04:27.581
ellos tienen muchas otras cosas importantes que hacer.

00:04:27.581 --> 00:04:30.935
Lo que en realidad queremos hacer es decirle al navegador que

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

00:04:35.585 --> 00:04:40.384
Podemos hacer eso usando un nuevo método: "window.clearInterval()".

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

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

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

00:04:55.799 --> 00:04:58.902
La manera de saber cuál intervalo limpiar

00:04:58.902 --> 00:05:02.983
es guardar el resultado de "setInterval" en una variable.

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

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

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

00:05:15.571 --> 00:05:19.332
Para cada animación que hagan, deben pensar cuidadosamente

00:05:19.332 --> 00:05:21.695
cuál debería ser la condición para detenerse.

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

00:05:26.132 --> 00:05:29.023
pero más vale que sean animaciones realmente buenas.

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

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