Animando DOM com setInterval (Versão vídeo)

Eu tenho essa página web
com uma foto de "Oh Noes"

que está enlouquecendo porque
o mundo vai acabar em breve -

especificamente, em 500 segundos.

Eu quero fazer essa página web muito
mais útil transformando esse número

em uma contagem regressiva

para que os visitantes possam ver
exatamente quanto tempo eles têm sobrando.

Quando animamos parte de uma página web,

a estratégia é achar algum elemento nela

e então mudar algo nesse elemento,

e fazer isso um certo número
de vezes por segundo.

Então, para o primeiro passo,
vou achar a contagem regressiva pelo ID.

Simples.

(digitando)

Para o segundo passo, vou fazer uma função
que executa uma contagem regressiva.

(digitando)

E o que vamos fazer...

Eu quero definir o 'textContent',

e eu quero que ele seja igual
ao número anterior menos um.

E o 'textContent' vai ser
uma cadeia de caracteres.

Então temos que tranformá-lo em um número.

Você pode fazer isso usando 'parsefloat()'

e então podemos subtrair um dele.

Então, finalmente, queremos chamar
essa função em um intervalo,

o que significa um certo
número de vezes por segundo.

E podemos fazer isso usando
'window.setInterval()'.

E essa função recebe dois argumentos:

a função de retorno de chamada e
o número de milissegundos para esperar

antes dessa função
ser chamada de novo.

Nós podemos especificar
a função de retorno de chamada

do mesmo jeito que especificamos
para ouvintes de evento: pelo nome.

E então, está indo
muito rápido agora

porque não especificamos
o segundo argumento.

Quanto a isso, queremos que ele seja
um certo número de milissegundos,

e queremos uma vez por segundo,
então vamos colocar um mil

porque existem um mil
milissegundos em um segundo.

Pronto, agora está
diminuindo um por segundo.

Então é melhor você aprender o máximo que
você puder nos próximos 490 segundos!

Há mais uma função de window que
usamos às vezes no lugar de 'setInterval',

e ela é 'setTimeout'.

E eu vou mudar para ela, e ver
se você consegue notar a diferença.

Tem que esperar um pouco.

Pronto, agora talvez você consiga ver
que quando usamos 'setTimeout',

o navegador apenas chama
a função uma vez, não repetidamente.

Isso não é tão útil para quando
estamos fazendo animações.

Mas pode ser super útil em outros casos,

como se mostrarmos um aviso
para nossos usuários e quiséssemos

escondê-lo após dez segundos.

Então deixe-me mudar isso
de volta para 'setInterval'

Agora, quando estamos
testando animações desse jeito,

deveríamos realmente ver como elas ficam
em todos os pontos da animação,

como o que acontece
quando chega a zero.

Bem, vai demorar um
bom tempo para chegar lá,

e você vai ficar
muito entediado

então vamos apenas mudar
nosso dado inicial para cinco,

e ver o que acontece.

Quatro, três, dois, um, zero...

Menos um, menos dois.

Agora isso está ficando estranho.

Quando o mundo acaba, ele deveria
apenas fazer "Kabum!" e parar de contar.

Então o que nós queremos fazer
na verdade é parar essa animação

uma vez que ela chegue ao zero.

E podemos fazer isso usando
uma condição if dentro da função.

Então, deixe-me começar guardando
o tempo atual em uma variável

já que vamos usá-lo
algumas vezes.

Então eu vou apenas pegar isso, colocar
aqui e substituir isso com 'currentTime'

Agora, o que eu posso fazer é
ter uma condição if para ter certeza

que apenas vamos atualizar o texto
se 'currentTime' for maior que zero.

Esse é o único momento em que
realmente queremos subtrair um.

Então eu vou precisar
colocar isso aqui dentro.

Isso funciona, mas tem algo
muito ruim nessa abordagem.

O navegador ainda está chamando
a função 'countItDown' uma vez por segundo

enquanto a página web está aberta.

Você não deveria fazer navegadores
chamarem funções sem motivo,

eles tem muitas outras coisas
importantes para fazer.

O que queremos mesmo fazer
é dizer ao navegador que

uma vez que chegue a zero, ele
não precisa mais chamar essa função.

Podemos fazer isso usando um novo
método: 'window.clearInterval()'.

Podemos colocá-lo nesse else aqui -
'window.clearInterval()'.

Agora, precisamos passar um argumento
para que ele saiba qual intervalo remover.

Porque podemos ter vários
intervalos em uma página.

O jeito de sabermos
qual intervalo remover

é guardar o resultado de
'setInterval' em uma variável.

Então, agora que eu tenho ele em uma
variável 'timer', posso copiar e colar ali

e agora ela sabe o que remover,
então quando chegar a zero

deve parar de atualizar e
deve parar de chamar a função.

Para cada animação que você faz,
você deveria pensar cuidadosamente sobre

qual deveria ser a
condição de parada.

E sim, você pode ter algumas animações
que devem repetir e repetir, meus amigos -

mas é melhor que elas
sejam animações muito boas.

Porque seu navegador
está trabalhando toda vez

que chama essa função
de retorno de chamada.

Agora faça sua versão e faça
o mundo realmente fazer "Kabum!".

[Legendado por: Alberto Oliveira]