WEBVTT
00:00:00.989 --> 00:00:04.015
Eu tenho essa página web
com uma foto de "Oh Noes"
00:00:04.015 --> 00:00:07.862
que está enlouquecendo porque
o mundo vai acabar em breve -
00:00:07.862 --> 00:00:10.473
especificamente, em 500 segundos.
00:00:10.473 --> 00:00:15.476
Eu quero fazer essa página web muito
mais útil transformando esse número
00:00:15.476 --> 00:00:16.934
em uma contagem regressiva
00:00:16.934 --> 00:00:20.781
para que os visitantes possam ver
exatamente quanto tempo eles têm sobrando.
00:00:21.261 --> 00:00:23.934
Quando animamos parte de uma página web,
00:00:23.934 --> 00:00:26.708
a estratégia é achar algum elemento nela
00:00:26.708 --> 00:00:29.303
e então mudar algo nesse elemento,
00:00:29.303 --> 00:00:32.779
e fazer isso um certo número
de vezes por segundo.
00:00:32.779 --> 00:00:37.693
Então, para o primeiro passo,
vou achar a contagem regressiva pelo ID.
00:00:37.693 --> 00:00:39.490
Simples.
00:00:39.490 --> 00:00:47.567
(digitando)
00:00:47.567 --> 00:00:51.742
Para o segundo passo, vou fazer uma função
que executa uma contagem regressiva.
00:00:51.742 --> 00:00:54.788
(digitando)
00:00:55.078 --> 00:00:57.116
E o que vamos fazer...
00:00:57.116 --> 00:00:59.447
Eu quero definir o 'textContent',
00:00:59.447 --> 00:01:03.925
e eu quero que ele seja igual
ao número anterior menos um.
00:01:03.925 --> 00:01:06.758
E o 'textContent' vai ser
uma cadeia de caracteres.
00:01:06.758 --> 00:01:10.027
Então temos que tranformá-lo em um número.
00:01:10.027 --> 00:01:12.853
Você pode fazer isso usando 'parsefloat()'
00:01:12.853 --> 00:01:15.753
e então podemos subtrair um dele.
00:01:15.753 --> 00:01:21.541
Então, finalmente, queremos chamar
essa função em um intervalo,
00:01:21.541 --> 00:01:25.418
o que significa um certo
número de vezes por segundo.
00:01:25.418 --> 00:01:30.415
E podemos fazer isso usando
'window.setInterval()'.
00:01:30.415 --> 00:01:33.691
E essa função recebe dois argumentos:
00:01:33.691 --> 00:01:38.096
a função de retorno de chamada e
o número de milissegundos para esperar
00:01:38.096 --> 00:01:40.785
antes dessa função
ser chamada de novo.
00:01:40.785 --> 00:01:43.369
Nós podemos especificar
a função de retorno de chamada
00:01:43.369 --> 00:01:46.809
do mesmo jeito que especificamos
para ouvintes de evento: pelo nome.
00:01:46.809 --> 00:01:49.350
E então, está indo
muito rápido agora
00:01:49.350 --> 00:01:51.737
porque não especificamos
o segundo argumento.
00:01:51.737 --> 00:01:55.250
Quanto a isso, queremos que ele seja
um certo número de milissegundos,
00:01:55.250 --> 00:01:58.520
e queremos uma vez por segundo,
então vamos colocar um mil
00:01:58.520 --> 00:02:01.408
porque existem um mil
milissegundos em um segundo.
00:02:01.408 --> 00:02:05.218
Pronto, agora está
diminuindo um por segundo.
00:02:05.218 --> 00:02:10.245
Então é melhor você aprender o máximo que
você puder nos próximos 490 segundos!
00:02:10.245 --> 00:02:15.036
Há mais uma função de window que
usamos às vezes no lugar de 'setInterval',
00:02:15.036 --> 00:02:16.747
e ela é 'setTimeout'.
00:02:16.747 --> 00:02:21.782
E eu vou mudar para ela, e ver
se você consegue notar a diferença.
00:02:21.782 --> 00:02:23.734
Tem que esperar um pouco.
00:02:23.734 --> 00:02:28.297
Pronto, agora talvez você consiga ver
que quando usamos 'setTimeout',
00:02:28.297 --> 00:02:34.141
o navegador apenas chama
a função uma vez, não repetidamente.
00:02:34.141 --> 00:02:38.965
Isso não é tão útil para quando
estamos fazendo animações.
00:02:38.965 --> 00:02:41.732
Mas pode ser super útil em outros casos,
00:02:41.732 --> 00:02:45.756
como se mostrarmos um aviso
para nossos usuários e quiséssemos
00:02:45.756 --> 00:02:48.090
escondê-lo após dez segundos.
00:02:48.090 --> 00:02:53.254
Então deixe-me mudar isso
de volta para 'setInterval'
00:02:53.254 --> 00:02:56.507
Agora, quando estamos
testando animações desse jeito,
00:02:56.507 --> 00:03:00.450
deveríamos realmente ver como elas ficam
em todos os pontos da animação,
00:03:00.450 --> 00:03:02.840
como o que acontece
quando chega a zero.
00:03:02.840 --> 00:03:05.018
Bem, vai demorar um
bom tempo para chegar lá,
00:03:05.018 --> 00:03:06.496
e você vai ficar
muito entediado
00:03:06.496 --> 00:03:10.691
então vamos apenas mudar
nosso dado inicial para cinco,
00:03:10.691 --> 00:03:12.408
e ver o que acontece.
00:03:12.408 --> 00:03:16.852
Quatro, três, dois, um, zero...
00:03:16.852 --> 00:03:19.289
Menos um, menos dois.
00:03:19.289 --> 00:03:21.878
Agora isso está ficando estranho.
00:03:21.878 --> 00:03:26.292
Quando o mundo acaba, ele deveria
apenas fazer "Kabum!" e parar de contar.
00:03:26.292 --> 00:03:30.111
Então o que nós queremos fazer
na verdade é parar essa animação
00:03:30.111 --> 00:03:32.734
uma vez que ela chegue ao zero.
00:03:32.734 --> 00:03:36.319
E podemos fazer isso usando
uma condição if dentro da função.
00:03:36.319 --> 00:03:42.287
Então, deixe-me começar guardando
o tempo atual em uma variável
00:03:42.287 --> 00:03:44.517
já que vamos usá-lo
algumas vezes.
00:03:44.517 --> 00:03:51.383
Então eu vou apenas pegar isso, colocar
aqui e substituir isso com 'currentTime'
00:03:51.383 --> 00:03:56.374
Agora, o que eu posso fazer é
ter uma condição if para ter certeza
00:03:56.374 --> 00:04:00.977
que apenas vamos atualizar o texto
se 'currentTime' for maior que zero.
00:04:01.387 --> 00:04:04.938
Esse é o único momento em que
realmente queremos subtrair um.
00:04:04.938 --> 00:04:08.887
Então eu vou precisar
colocar isso aqui dentro.
00:04:11.437 --> 00:04:15.012
Isso funciona, mas tem algo
muito ruim nessa abordagem.
00:04:15.012 --> 00:04:19.654
O navegador ainda está chamando
a função 'countItDown' uma vez por segundo
00:04:19.654 --> 00:04:21.649
enquanto a página web está aberta.
00:04:22.069 --> 00:04:25.032
Você não deveria fazer navegadores
chamarem funções sem motivo,
00:04:25.102 --> 00:04:27.591
eles tem muitas outras coisas
importantes para fazer.
00:04:28.281 --> 00:04:30.935
O que queremos mesmo fazer
é dizer ao navegador que
00:04:30.935 --> 00:04:35.585
uma vez que chegue a zero, ele
não precisa mais chamar essa função.
00:04:35.825 --> 00:04:40.384
Podemos fazer isso usando um novo
método: 'window.clearInterval()'.
00:04:40.384 --> 00:04:47.354
Podemos colocá-lo nesse else aqui -
'window.clearInterval()'.
00:04:47.354 --> 00:04:52.189
Agora, precisamos passar um argumento
para que ele saiba qual intervalo remover.
00:04:52.189 --> 00:04:55.799
Porque podemos ter vários
intervalos em uma página.
00:04:55.799 --> 00:04:58.812
O jeito de sabermos
qual intervalo remover
00:04:58.812 --> 00:05:02.983
é guardar o resultado de
'setInterval' em uma variável.
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
00:05:07.816 --> 00:05:11.122
e agora ela sabe o que remover,
então quando chegar a zero
00:05:11.122 --> 00:05:15.571
deve parar de atualizar e
deve parar de chamar a função.
00:05:15.571 --> 00:05:19.332
Para cada animação que você faz,
você deveria pensar cuidadosamente sobre
00:05:19.332 --> 00:05:21.695
qual deveria ser a
condição de parada.
00:05:21.695 --> 00:05:26.132
E sim, você pode ter algumas animações
que devem repetir e repetir, meus amigos -
00:05:26.132 --> 00:05:29.023
mas é melhor que elas
sejam animações muito boas.
00:05:29.023 --> 00:05:31.542
Porque seu navegador
está trabalhando toda vez
00:05:31.542 --> 00:05:33.631
que chama essa função
de retorno de chamada.
00:05:33.631 --> 00:05:37.341
Agora faça sua versão e faça
o mundo realmente fazer "Kabum!".
00:05:37.341 --> 00:05:38.931
[Legendado por: Alberto Oliveira]