0:00:00.989,0:00:04.015
Eu tenho essa página web[br]com uma foto de "Oh Noes"

0:00:04.015,0:00:07.862
que está enlouquecendo porque[br]o mundo vai acabar em breve -

0:00:07.862,0:00:10.473
especificamente, em 500 segundos.

0:00:10.473,0:00:15.476
Eu quero fazer essa página web muito[br]mais útil transformando esse número

0:00:15.476,0:00:16.934
em uma contagem regressiva

0:00:16.934,0:00:20.781
para que os visitantes possam ver[br]exatamente quanto tempo eles têm sobrando.

0:00:21.261,0:00:23.934
Quando animamos parte de uma página web,

0:00:23.934,0:00:26.708
a estratégia é achar algum elemento nela

0:00:26.708,0:00:29.303
e então mudar algo nesse elemento,

0:00:29.303,0:00:32.779
e fazer isso um certo número[br]de vezes por segundo.

0:00:32.779,0:00:37.693
Então, para o primeiro passo,[br]vou achar a contagem regressiva pelo ID.

0:00:37.693,0:00:39.490
Simples.

0:00:39.490,0:00:47.567
(digitando)

0:00:47.567,0:00:51.742
Para o segundo passo, vou fazer uma função[br]que executa uma contagem regressiva.

0:00:51.742,0:00:54.788
(digitando)

0:00:55.078,0:00:57.116
E o que vamos fazer...

0:00:57.116,0:00:59.447
Eu quero definir o '<i>textContent</i>',

0:00:59.447,0:01:03.925
e eu quero que ele seja igual[br]ao número anterior menos um.

0:01:03.925,0:01:06.758
E o '<i>textContent</i>' vai ser[br]uma cadeia de caracteres.

0:01:06.758,0:01:10.027
Então temos que tranformá-lo em um número.

0:01:10.027,0:01:12.853
Você pode fazer isso usando '<i>parsefloat()</i>'

0:01:12.853,0:01:15.753
e então podemos subtrair um dele.

0:01:15.753,0:01:21.541
Então, finalmente, queremos chamar[br]essa função em um intervalo,

0:01:21.541,0:01:25.418
o que significa um certo[br]número de vezes por segundo.

0:01:25.418,0:01:30.415
E podemos fazer isso usando[br]'<i>window.setInterval()</i>'.

0:01:30.415,0:01:33.691
E essa função recebe dois argumentos:

0:01:33.691,0:01:38.096
a função de retorno de chamada e[br]o número de milissegundos para esperar

0:01:38.096,0:01:40.785
antes dessa função[br]ser chamada de novo.

0:01:40.785,0:01:43.369
Nós podemos especificar [br]a função de retorno de chamada

0:01:43.369,0:01:46.809
do mesmo jeito que especificamos[br]para ouvintes de evento: pelo nome.

0:01:46.809,0:01:49.350
E então, está indo[br]muito rápido agora

0:01:49.350,0:01:51.737
porque não especificamos[br]o segundo argumento.

0:01:51.737,0:01:55.250
Quanto a isso, queremos que ele seja[br]um certo número de milissegundos,

0:01:55.250,0:01:58.520
e queremos uma vez por segundo,[br]então vamos colocar um mil

0:01:58.520,0:02:01.408
porque existem um mil[br]milissegundos em um segundo.

0:02:01.408,0:02:05.218
Pronto, agora está [br]diminuindo um por segundo.

0:02:05.218,0:02:10.245
Então é melhor você aprender o máximo que [br]você puder nos próximos 490 segundos!

0:02:10.245,0:02:15.036
Há mais uma função de <i>window</i> que[br]usamos às vezes no lugar de '<i>setInterval</i>',

0:02:15.036,0:02:16.747
e ela é '<i>setTimeout</i>'.

0:02:16.747,0:02:21.782
E eu vou mudar para ela, e ver[br]se você consegue notar a diferença.

0:02:21.782,0:02:23.734
Tem que esperar um pouco.

0:02:23.734,0:02:28.297
Pronto, agora talvez você consiga ver[br]que quando usamos '<i>setTimeout</i>',

0:02:28.297,0:02:34.141
o navegador apenas chama[br]a função uma vez, não repetidamente.

0:02:34.141,0:02:38.965
Isso não é tão útil para quando[br]estamos fazendo animações.

0:02:38.965,0:02:41.732
Mas pode ser super útil em outros casos,

0:02:41.732,0:02:45.756
como se mostrarmos um aviso[br]para nossos usuários e quiséssemos

0:02:45.756,0:02:48.090
escondê-lo após dez segundos.

0:02:48.090,0:02:53.254
Então deixe-me mudar isso[br]de volta para '<i>setInterval</i>'

0:02:53.254,0:02:56.507
Agora, quando estamos[br]testando animações desse jeito,

0:02:56.507,0:03:00.450
deveríamos realmente ver como elas ficam[br]em todos os pontos da animação,

0:03:00.450,0:03:02.840
como o que acontece[br]quando chega a zero.

0:03:02.840,0:03:05.018
Bem, vai demorar um[br]bom tempo para chegar lá,

0:03:05.018,0:03:06.496
e você vai ficar[br]muito entediado

0:03:06.496,0:03:10.691
então vamos apenas mudar[br]nosso dado inicial para cinco,

0:03:10.691,0:03:12.408
e ver o que acontece.

0:03:12.408,0:03:16.852
Quatro, três, dois, um, zero...

0:03:16.852,0:03:19.289
Menos um, menos dois.

0:03:19.289,0:03:21.878
Agora isso está ficando estranho.

0:03:21.878,0:03:26.292
Quando o mundo acaba, ele deveria[br]apenas fazer "Kabum!" e parar de contar.

0:03:26.292,0:03:30.111
Então o que nós queremos fazer[br]na verdade é parar essa animação

0:03:30.111,0:03:32.734
uma vez que ela chegue ao zero.

0:03:32.734,0:03:36.319
E podemos fazer isso usando[br]uma condição <i>if</i> dentro da função.

0:03:36.319,0:03:42.287
Então, deixe-me começar guardando[br]o tempo atual em uma variável

0:03:42.287,0:03:44.517
já que vamos usá-lo[br]algumas vezes.

0:03:44.517,0:03:51.383
Então eu vou apenas pegar isso, colocar[br]aqui e substituir isso com '<i>currentTime</i>'

0:03:51.383,0:03:56.374
Agora, o que eu posso fazer é[br]ter uma condição <i>if</i> para ter certeza

0:03:56.374,0:04:00.977
que apenas vamos atualizar o texto[br]se '<i>currentTime</i>' for maior que zero.

0:04:01.387,0:04:04.938
Esse é o único momento em que[br]realmente queremos subtrair um.

0:04:04.938,0:04:08.887
Então eu vou precisar[br]colocar isso aqui dentro.

0:04:11.437,0:04:15.012
Isso funciona, mas tem algo[br]muito ruim nessa abordagem.

0:04:15.012,0:04:19.654
O navegador ainda está chamando[br]a função '<i>countItDown</i>' uma vez por segundo

0:04:19.654,0:04:21.649
enquanto a página web está aberta.

0:04:22.069,0:04:25.032
Você não deveria fazer navegadores[br]chamarem funções sem motivo,

0:04:25.102,0:04:27.591
eles tem muitas outras coisas[br]importantes para fazer.

0:04:28.281,0:04:30.935
O que queremos mesmo fazer[br]é dizer ao navegador que

0:04:30.935,0:04:35.585
uma vez que chegue a zero, ele [br]não precisa mais chamar essa função.

0:04:35.825,0:04:40.384
Podemos fazer isso usando um novo [br]método: '<i>window.clearInterval()</i>'.

0:04:40.384,0:04:47.354
Podemos colocá-lo nesse <i>else</i> aqui -[br]'<i>window.clearInterval()</i>'.

0:04:47.354,0:04:52.189
Agora, precisamos passar um argumento[br]para que ele saiba qual intervalo remover.

0:04:52.189,0:04:55.799
Porque podemos ter vários[br]intervalos em uma página.

0:04:55.799,0:04:58.812
O jeito de sabermos[br]qual intervalo remover

0:04:58.812,0:05:02.983
é guardar o resultado de[br]'<i>setInterval</i>' em uma variável.

0:05:02.983,0:05:07.816
Então, agora que eu tenho ele em uma[br]variável '<i>timer</i>', posso copiar e colar ali

0:05:07.816,0:05:11.122
e agora ela sabe o que remover,[br]então quando chegar a zero

0:05:11.122,0:05:15.571
deve parar de atualizar e[br]deve parar de chamar a função.

0:05:15.571,0:05:19.332
Para cada animação que você faz,[br]você deveria pensar cuidadosamente sobre

0:05:19.332,0:05:21.695
qual deveria ser a[br]condição de parada.

0:05:21.695,0:05:26.132
E sim, você pode ter algumas animações[br]que devem repetir e repetir, meus amigos -

0:05:26.132,0:05:29.023
mas é melhor que elas[br]sejam animações muito boas.

0:05:29.023,0:05:31.542
Porque seu navegador [br]está trabalhando toda vez

0:05:31.542,0:05:33.631
que chama essa função[br]de retorno de chamada.

0:05:33.631,0:05:37.341
Agora faça sua versão e faça[br]o mundo realmente fazer "Kabum!".

0:05:37.341,0:05:38.931
[Legendado por: Alberto Oliveira]