O window objeto, que oferece a setTimeout e setInterval métodos para agendar eventos, é responsável por controlar os eventos de temporização do JavaScript. Em JavaScript, a unidade de medida de tempo para eventos de temporização é milissegundos, o que fornece um bom equilíbrio entre precisão e praticidade. 1.000 milissegundos representam um segundo, 2.000 milissegundos representam dois segundos e assim por diante.
Eventos atrasados com o setTimeout Função
O setTimeout A função é usada para executar um pedaço de código após um período de tempo predeterminado. A sintaxe desta função é a seguinte:
setTimeout(function, milliseconds);
Isso executa uma função, após aguardar um número especificado de milissegundos.
O primeiro parâmetro é uma função a ser executada. O segundo parâmetro especifica quantos milissegundos esperar antes da execução. Se, por exemplo, você quiser uma mensagem dizendo “Ei” para aparecer na tela após três segundos, é assim que o código ficaria:
1 |
<button onclick="setTimeout(timingFunction, 3000)">Click Me!</button> |
2 |
|
3 |
function timingFunction() { |
4 |
alert('Hey there'); |
5 |
}
|
6 |
|
Eventos repetidos com o setInterval Função
O setInterval A função é usada para executar um pedaço de código repetidamente em intervalos predeterminados. A sintaxe desta função é a seguinte:
setInterval(function, milliseconds);
O primeiro parâmetro é uma função a ser executada. O segundo parâmetro especifica o intervalo entre cada execução. Vamos construir um relógio digital simples que exiba a hora atual para demonstrar isso. O relógio executa a função digitalClock a cada segundo, assim como funciona um relógio digital.
Limpando eventos de temporização
Podemos, em algum momento, querer interromper a execução de uma função após ela ter sido executada algumas vezes ou por um período de tempo especificado. Para interromper a execução cronometrada, prefixe clear para a função de evento de temporização com a qual você está trabalhando.
O clearTimeout() função é usada para parar o execução de uma função especificada no setTimeout() função. O setTimeout() A função retorna um ID de tempo. Você pode usar esse id para limpar o tempo limite mais tarde com clearTimeout().
1 |
<button onclick="timingID = setTimeout(timingFunction, 3000)">Start</button> |
2 |
<button onclick="clearTimeout(timingID)">End</button> |
3 |
|
4 |
function timingFunction() { |
5 |
alert("Hey there"); |
6 |
}
|
Se você clicar no Começar botão, ele espera por 3 segundos antes do “Ei” mensagem é alertada. Se você clicar no botão Fim botão antes desses 3 segundos, ele interrompe a execução da função.
Da mesma forma, o clearInterval() função é usada para interromper a execução de uma função especificada no setInterval() função. Assim como para setTimeout()ele usa o ID do timer retornado do setInterval() função como argumento. Para demonstrar isso, adicionaremos um botão de parada ao exemplo de relógio digital acima.
Os relógios começam a funcionar assim que a página é carregada, mas quando você clica no botão Pare o tempo botão, ele pára.
Importância de limpar as funções de evento de temporização
Ao usar eventos de temporização em JavaScript, é crucial ter em mente que os eventos devem ser apagados usando o clearTimeout() ou clearInterval() funciona pelos seguintes motivos:
Para evitar vazamentos de memória
Uma referência à função que você deseja executar é armazenada na memória quando você define um tempo limite ou intervalo em JavaScript. Quando um tempo limite ou intervalo não for mais necessário, você deve remover a referência da memória para evitar o aumento do uso da memória. Problemas de desempenho podem eventualmente resultar disso, especialmente se você estiver lidando com muitos dados.
Para evitar comportamento inesperado do código
Se você tiver um intervalo que atualiza a IU a cada segundo, mas não o limpa quando o usuário sai da página, o intervalo continuará disparando mesmo quando o usuário não estiver mais visualizando a página.
chamando clearTimeout() ou clearInterval(), você pode cancelar o cronômetro pendente e evitar que esses problemas ocorram. Isso ajuda a evitar vazamentos de memória e comportamento inesperado, garantindo que seu código seja eficaz e previsível.
Exemplo de projeto combinando ambos os eventos de temporização
Aqui está um pequeno projeto para demonstrar os dois principais eventos de temporização do JavaScript em uma funcionalidade mais avançada. Esta é uma página web simples que usa setInterval() para exibir um número aleatório a cada segundo e setTimeout() para parar a exibição após 20 segundos.
Aqui estão algumas ideias para outros pequenos projetos de aprendizado que você pode tentar aprimorar suas habilidades com as funções de intervalo e tempo limite:
- cronômetro de contagem regressiva
- gerador de citações aleatórias
- animação de apresentação de slides
- Jogo de perguntas e respostas em JavaScript com temporizador
Conclusão
Os eventos de temporização em JavaScript são uma ferramenta útil para desenvolvedores da Web, pois permitem que eles criem páginas da Web dinâmicas e interativas. O setTimeOut() e setInterval() As funções oferecem uma abordagem simples para agendar a execução do código em um horário ou intervalo específico. Essas funções podem ser usadas para fazer uma apresentação de slides, animações e outros elementos interativos que precisam ser atualizados ou alterados ao longo do tempo em uma página da web.
Miniatura de postagem gerada com o DALL-E 2 da OpenAI.
