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]