1
00:00:00,639 --> 00:00:03,875
Tengo esta página web con una imagen de "Oh noes",

2
00:00:03,875 --> 00:00:07,862
que está anunciando que el mundo se va a terminar pronto,

3
00:00:07,862 --> 00:00:10,473
específicamente en 500 segundos.

4
00:00:10,473 --> 00:00:13,356
Quiero hacer que esta página web sea más útil,

5
00:00:13,356 --> 00:00:16,934
cambiando este número a una cuenta regresiva en vivo,

6
00:00:16,934 --> 00:00:20,781
de manera que los visitantes puedan ver exactamente cuánto tiempo les queda.

7
00:00:20,781 --> 00:00:23,934
Ahora, cuando animamos una parte de una página web,

8
00:00:23,934 --> 00:00:26,708
la estrategia es encontrar en ella algún elemento,

9
00:00:26,708 --> 00:00:29,303
luego cambiar algo de ese elemento,

10
00:00:29,303 --> 00:00:32,779
y hacer eso un cierto número de veces por segundo.

11
00:00:32,779 --> 00:00:37,693
Así que para el primer paso, voy a encontrar el "countdown" por "Id". (La cuenta regresiva).

12
00:00:37,693 --> 00:00:39,700
Sencillo.

13
00:00:39,700 --> 00:00:47,377
'var countdown = document.getElementById("countdown");'

14
00:00:47,536 --> 00:00:51,612
En el segundo paso, voy a escribir una función que haga un conteo regresivo.

15
00:00:51,612 --> 00:00:54,588
'var countItDown = funtion() {'...

16
00:00:54,588 --> 00:00:56,856
Y lo que vamos a hacer...

17
00:00:56,856 --> 00:01:01,217
Quiero definir el "textContent", y lo quiero definir como

18
00:01:01,217 --> 00:01:03,755
el número previo menos uno.

19
00:01:03,755 --> 00:01:06,798
Y el "textContent" en realidad es una cadena de caracteres,

20
00:01:06,798 --> 00:01:09,947
así que lo tenemos que cambiar a un número.

21
00:01:09,947 --> 00:01:12,853
Podemos hacer eso usando "parsefloat()".

22
00:01:12,853 --> 00:01:15,753
Y luego le podemos restar uno.

23
00:01:15,753 --> 00:01:21,541
Ok, finalmente, queremos llamar esta función en un intervalo,

24
00:01:21,541 --> 00:01:25,328
lo que significa: un cierto número de veces por segundo.

25
00:01:25,328 --> 00:01:30,415
Y podemos hacer eso usando "window.setInterval()".

26
00:01:30,415 --> 00:01:33,691
Y esta función tiene dos argumentos:

27
00:01:33,691 --> 00:01:38,096
la función "callback" y el número de milisegundos que tiene que esperar

28
00:01:38,096 --> 00:01:40,885
antes de que la función se llame otra vez.

29
00:01:40,885 --> 00:01:43,369
Podemos especificar la función de tipo "callback"

30
00:01:43,369 --> 00:01:46,809
de la misma manera que lo hicimos con los detectores de eventos: por nombre.

31
00:01:46,809 --> 00:01:49,640
Y luego... en realidad ahora está corriendo muy rápido,

32
00:01:49,640 --> 00:01:51,827
porque no le hemos especificado el segundo argumento,

33
00:01:51,827 --> 00:01:55,250
así que para eso, queremos que sea un cierto número de milisegundos,

34
00:01:55,250 --> 00:01:58,520
y queremos que se llame una vez por segundo, así que vamos a escribir: 1000,

35
00:01:58,520 --> 00:02:01,558
porque hay 1000 milisegundos en un segundo.

36
00:02:01,558 --> 00:02:05,218
Aquí vamos, ahora está contando una vez por segundo.

37
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!

38
00:02:10,245 --> 00:02:15,036
Hay una función más de "window" que usamos algunas veces en lugar de "setInterval",

39
00:02:15,036 --> 00:02:17,227
y es "setTimeout".

40
00:02:17,227 --> 00:02:21,782
Y sólo la voy cambiar aquí, a ver si puedes ver la diferencia.

41
00:02:21,782 --> 00:02:23,681
Tenemos que esperar un segundo.

42
00:02:23,681 --> 00:02:28,297
Ok, ahora probablemente puedas ver que cuando usamos "setTimeout",

43
00:02:28,297 --> 00:02:33,881
el navegador sólo llama la función una vez, y no repetidamente.

44
00:02:33,881 --> 00:02:38,705
Esto no es tan útil cuando estamos haciendo animaciones.

45
00:02:38,705 --> 00:02:41,732
Pero puede ser muy útil en otros casos,

46
00:02:41,732 --> 00:02:45,866
como cuando mostramos una bandera de advertencia, y luego la queremos

47
00:02:45,866 --> 00:02:48,090
ocultar después de 10 segundos.

48
00:02:48,090 --> 00:02:52,894
Así que déjenme regresar esto a "setInterval".

49
00:02:52,894 --> 00:02:56,507
Ahora, cuando estamos probando animaciones como ésta,

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

51
00:03:00,410 --> 00:03:02,460
como cuando llega a cero.

52
00:03:02,460 --> 00:03:05,258
Bueno, va a tomar mucho tiempo para llegar a cero,

53
00:03:05,258 --> 00:03:07,206
y vas a estar muy aburrido, así que

54
00:03:07,206 --> 00:03:10,581
vamos a cambiar el dato inicial a 5,

55
00:03:10,581 --> 00:03:12,538
y ver qué pasa.

56
00:03:12,538 --> 00:03:16,732
Cuatro, tres, dos, uno, cero...

57
00:03:16,732 --> 00:03:19,289
uno negativo, dos negativo.

58
00:03:19,289 --> 00:03:21,878
Ok, ahora se ve un poco raro.

59
00:03:21,878 --> 00:03:26,292
Cuando el mundo se acaba, simplemente debería hacer ¡Kaboom! y dejar de contar.

60
00:03:26,292 --> 00:03:30,111
Así que lo que queremos hacer en realidad, es detener esta animación,

61
00:03:30,111 --> 00:03:32,734
una vez que llegue a cero.

62
00:03:32,734 --> 00:03:36,319
Y podemos hacer eso usando una condición "if" dentro de la función.

63
00:03:36,319 --> 00:03:42,227
Así que déjenme empezar por guardar el segundo actual en una variable,

64
00:03:42,227 --> 00:03:44,517
porque lo vamos a usar algunas veces.

65
00:03:44,517 --> 00:03:47,513
Así que voy a copiar esto y ponerlo aquí,

66
00:03:47,513 --> 00:03:51,273
y reemplazar esto con "currentTime".

67
00:03:51,273 --> 00:03:55,564
Ahora lo que puedo hacer es poner una condición "if"

68
00:03:55,564 --> 00:04:01,097
que nos asegure que sólo actualizará el texto si "currentTime" es mayor que cero.

69
00:04:01,097 --> 00:04:04,938
Que es en realidad, cuando queremos que reste uno.

70
00:04:04,938 --> 00:04:10,497
Entonces necesito mover esto aquí dentro.

71
00:04:10,497 --> 00:04:15,012
Esto funciona, pero en realidad hay algo mal en este enfoque.

72
00:04:15,012 --> 00:04:19,444
El navegador sigue llamando a la función "countItDown" una vez por segundo

73
00:04:19,444 --> 00:04:21,559
en tanto que esta página web está abierta.

74
00:04:21,559 --> 00:04:24,842
No deberías hacer que los navegadores llamaran funciones sin razón,

75
00:04:24,842 --> 00:04:27,581
ellos tienen muchas otras cosas importantes que hacer.

76
00:04:27,581 --> 00:04:30,935
Lo que en realidad queremos hacer es decirle al navegador que

77
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.

78
00:04:35,585 --> 00:04:40,384
Podemos hacer eso usando un nuevo método: "window.clearInterval()".

79
00:04:40,384 --> 00:04:47,354
Podemos pegar eso en este "else", aquí, "window.clearInterval()".

80
00:04:47,354 --> 00:04:52,189
Ahora, necesitamos pasarle un argumento, para que sepa cuál intervalo debe limpiar.

81
00:04:52,189 --> 00:04:55,799
Porque en realidad podríamos tener múltiples intervalos en un página.

82
00:04:55,799 --> 00:04:58,902
La manera de saber cuál intervalo limpiar

83
00:04:58,902 --> 00:05:02,983
es guardar el resultado de "setInterval" en una variable.

84
00:05:02,983 --> 00:05:07,816
Así que ahora que tengo el resultado en la variable "timer", puedo copiar y pegaralo allí,

85
00:05:07,816 --> 00:05:11,122
y ahora ya sabe qué limpiar, cuando llegue a cero,

86
00:05:11,122 --> 00:05:15,571
debe dejar de actualizar, y debe dejar de llamar a la función.

87
00:05:15,571 --> 00:05:19,332
Para cada animación que hagan, deben pensar cuidadosamente

88
00:05:19,332 --> 00:05:21,695
cuál debería ser la condición para detenerse.

89
00:05:21,695 --> 00:05:26,132
Y sí, probablemente tengan algunas animaciones que deberían correr y correr, amigos,

90
00:05:26,132 --> 00:05:29,023
pero más vale que sean animaciones realmente buenas.

91
00:05:29,023 --> 00:05:33,514
Porque el navegador estará trabajando cada vez que llamen esa función de tipo "callback".

92
00:05:33,514 --> 00:05:37,514
Ahora den vuelta a la página y logren que el mundo haga ¡Kaboom!