1
00:00:00,989 --> 00:00:04,015
Eu tenho essa página web
com uma foto de "Oh Noes"
2
00:00:04,015 --> 00:00:07,862
que está enlouquecendo porque
o mundo vai acabar em breve -
3
00:00:07,862 --> 00:00:10,473
especificamente, em 500 segundos.
4
00:00:10,473 --> 00:00:15,476
Eu quero fazer essa página web muito
mais útil transformando esse número
5
00:00:15,476 --> 00:00:16,934
em uma contagem regressiva
6
00:00:16,934 --> 00:00:20,781
para que os visitantes possam ver
exatamente quanto tempo eles têm sobrando.
7
00:00:21,261 --> 00:00:23,934
Quando animamos parte de uma página web,
8
00:00:23,934 --> 00:00:26,708
a estratégia é achar algum elemento nela
9
00:00:26,708 --> 00:00:29,303
e então mudar algo nesse elemento,
10
00:00:29,303 --> 00:00:32,779
e fazer isso um certo número
de vezes por segundo.
11
00:00:32,779 --> 00:00:37,693
Então, para o primeiro passo,
vou achar a contagem regressiva pelo ID.
12
00:00:37,693 --> 00:00:39,490
Simples.
13
00:00:39,490 --> 00:00:47,567
(digitando)
14
00:00:47,567 --> 00:00:51,742
Para o segundo passo, vou fazer uma função
que executa uma contagem regressiva.
15
00:00:51,742 --> 00:00:54,788
(digitando)
16
00:00:55,078 --> 00:00:57,116
E o que vamos fazer...
17
00:00:57,116 --> 00:00:59,447
Eu quero definir o 'textContent',
18
00:00:59,447 --> 00:01:03,925
e eu quero que ele seja igual
ao número anterior menos um.
19
00:01:03,925 --> 00:01:06,758
E o 'textContent' vai ser
uma cadeia de caracteres.
20
00:01:06,758 --> 00:01:10,027
Então temos que tranformá-lo em um número.
21
00:01:10,027 --> 00:01:12,853
Você pode fazer isso usando 'parsefloat()'
22
00:01:12,853 --> 00:01:15,753
e então podemos subtrair um dele.
23
00:01:15,753 --> 00:01:21,541
Então, finalmente, queremos chamar
essa função em um intervalo,
24
00:01:21,541 --> 00:01:25,418
o que significa um certo
número de vezes por segundo.
25
00:01:25,418 --> 00:01:30,415
E podemos fazer isso usando
'window.setInterval()'.
26
00:01:30,415 --> 00:01:33,691
E essa função recebe dois argumentos:
27
00:01:33,691 --> 00:01:38,096
a função de retorno de chamada e
o número de milissegundos para esperar
28
00:01:38,096 --> 00:01:40,785
antes dessa função
ser chamada de novo.
29
00:01:40,785 --> 00:01:43,369
Nós podemos especificar
a função de retorno de chamada
30
00:01:43,369 --> 00:01:46,809
do mesmo jeito que especificamos
para ouvintes de evento: pelo nome.
31
00:01:46,809 --> 00:01:49,350
E então, está indo
muito rápido agora
32
00:01:49,350 --> 00:01:51,737
porque não especificamos
o segundo argumento.
33
00:01:51,737 --> 00:01:55,250
Quanto a isso, queremos que ele seja
um certo número de milissegundos,
34
00:01:55,250 --> 00:01:58,520
e queremos uma vez por segundo,
então vamos colocar um mil
35
00:01:58,520 --> 00:02:01,408
porque existem um mil
milissegundos em um segundo.
36
00:02:01,408 --> 00:02:05,218
Pronto, agora está
diminuindo um por segundo.
37
00:02:05,218 --> 00:02:10,245
Então é melhor você aprender o máximo que
você puder nos próximos 490 segundos!
38
00:02:10,245 --> 00:02:15,036
Há mais uma função de window que
usamos às vezes no lugar de 'setInterval',
39
00:02:15,036 --> 00:02:16,747
e ela é 'setTimeout'.
40
00:02:16,747 --> 00:02:21,782
E eu vou mudar para ela, e ver
se você consegue notar a diferença.
41
00:02:21,782 --> 00:02:23,734
Tem que esperar um pouco.
42
00:02:23,734 --> 00:02:28,297
Pronto, agora talvez você consiga ver
que quando usamos 'setTimeout',
43
00:02:28,297 --> 00:02:34,141
o navegador apenas chama
a função uma vez, não repetidamente.
44
00:02:34,141 --> 00:02:38,965
Isso não é tão útil para quando
estamos fazendo animações.
45
00:02:38,965 --> 00:02:41,732
Mas pode ser super útil em outros casos,
46
00:02:41,732 --> 00:02:45,756
como se mostrarmos um aviso
para nossos usuários e quiséssemos
47
00:02:45,756 --> 00:02:48,090
escondê-lo após dez segundos.
48
00:02:48,090 --> 00:02:53,254
Então deixe-me mudar isso
de volta para 'setInterval'
49
00:02:53,254 --> 00:02:56,507
Agora, quando estamos
testando animações desse jeito,
50
00:02:56,507 --> 00:03:00,450
deveríamos realmente ver como elas ficam
em todos os pontos da animação,
51
00:03:00,450 --> 00:03:02,840
como o que acontece
quando chega a zero.
52
00:03:02,840 --> 00:03:05,018
Bem, vai demorar um
bom tempo para chegar lá,
53
00:03:05,018 --> 00:03:06,496
e você vai ficar
muito entediado
54
00:03:06,496 --> 00:03:10,691
então vamos apenas mudar
nosso dado inicial para cinco,
55
00:03:10,691 --> 00:03:12,408
e ver o que acontece.
56
00:03:12,408 --> 00:03:16,852
Quatro, três, dois, um, zero...
57
00:03:16,852 --> 00:03:19,289
Menos um, menos dois.
58
00:03:19,289 --> 00:03:21,878
Agora isso está ficando estranho.
59
00:03:21,878 --> 00:03:26,292
Quando o mundo acaba, ele deveria
apenas fazer "Kabum!" e parar de contar.
60
00:03:26,292 --> 00:03:30,111
Então o que nós queremos fazer
na verdade é parar essa animação
61
00:03:30,111 --> 00:03:32,734
uma vez que ela chegue ao zero.
62
00:03:32,734 --> 00:03:36,319
E podemos fazer isso usando
uma condição if dentro da função.
63
00:03:36,319 --> 00:03:42,287
Então, deixe-me começar guardando
o tempo atual em uma variável
64
00:03:42,287 --> 00:03:44,517
já que vamos usá-lo
algumas vezes.
65
00:03:44,517 --> 00:03:51,383
Então eu vou apenas pegar isso, colocar
aqui e substituir isso com 'currentTime'
66
00:03:51,383 --> 00:03:56,374
Agora, o que eu posso fazer é
ter uma condição if para ter certeza
67
00:03:56,374 --> 00:04:00,977
que apenas vamos atualizar o texto
se 'currentTime' for maior que zero.
68
00:04:01,387 --> 00:04:04,938
Esse é o único momento em que
realmente queremos subtrair um.
69
00:04:04,938 --> 00:04:08,887
Então eu vou precisar
colocar isso aqui dentro.
70
00:04:11,437 --> 00:04:15,012
Isso funciona, mas tem algo
muito ruim nessa abordagem.
71
00:04:15,012 --> 00:04:19,654
O navegador ainda está chamando
a função 'countItDown' uma vez por segundo
72
00:04:19,654 --> 00:04:21,649
enquanto a página web está aberta.
73
00:04:22,069 --> 00:04:25,032
Você não deveria fazer navegadores
chamarem funções sem motivo,
74
00:04:25,102 --> 00:04:27,591
eles tem muitas outras coisas
importantes para fazer.
75
00:04:28,281 --> 00:04:30,935
O que queremos mesmo fazer
é dizer ao navegador que
76
00:04:30,935 --> 00:04:35,585
uma vez que chegue a zero, ele
não precisa mais chamar essa função.
77
00:04:35,825 --> 00:04:40,384
Podemos fazer isso usando um novo
método: 'window.clearInterval()'.
78
00:04:40,384 --> 00:04:47,354
Podemos colocá-lo nesse else aqui -
'window.clearInterval()'.
79
00:04:47,354 --> 00:04:52,189
Agora, precisamos passar um argumento
para que ele saiba qual intervalo remover.
80
00:04:52,189 --> 00:04:55,799
Porque podemos ter vários
intervalos em uma página.
81
00:04:55,799 --> 00:04:58,812
O jeito de sabermos
qual intervalo remover
82
00:04:58,812 --> 00:05:02,983
é guardar o resultado de
'setInterval' em uma variável.
83
00:05:02,983 --> 00:05:07,816
Então, agora que eu tenho ele em uma
variável 'timer', posso copiar e colar ali
84
00:05:07,816 --> 00:05:11,122
e agora ela sabe o que remover,
então quando chegar a zero
85
00:05:11,122 --> 00:05:15,571
deve parar de atualizar e
deve parar de chamar a função.
86
00:05:15,571 --> 00:05:19,332
Para cada animação que você faz,
você deveria pensar cuidadosamente sobre
87
00:05:19,332 --> 00:05:21,695
qual deveria ser a
condição de parada.
88
00:05:21,695 --> 00:05:26,132
E sim, você pode ter algumas animações
que devem repetir e repetir, meus amigos -
89
00:05:26,132 --> 00:05:29,023
mas é melhor que elas
sejam animações muito boas.
90
00:05:29,023 --> 00:05:31,542
Porque seu navegador
está trabalhando toda vez
91
00:05:31,542 --> 00:05:33,631
que chama essa função
de retorno de chamada.
92
00:05:33,631 --> 00:05:37,341
Agora faça sua versão e faça
o mundo realmente fazer "Kabum!".
93
00:05:37,341 --> 00:05:38,931
[Legendado por: Alberto Oliveira]