Timing Events JS, eventos de tempo no javaScript

Timing Events JS, eventos de tempo no javaScript

  25 de setembro de 2018    henrique

---

Neste post irei mostrar como fazer o navegador aguarda um tempo para executar o próximo comando e também como cancelar um evento de aguarde no meio da execução.

Primeiro vamos ver como fazer com que o navegador aguarde um tempo para executar uma ação.
Para isso vamos utilizar nossa famosa função de exibir um alert "Olá mundo";

<button onclick="setTimeout(myFunction, 2000)">Clique aqui</button>

<script>
function myFunction() {
alert('Olá mundo');
}
</script>

Neste caso só será exibida a mensagem dois segundo após o clique, já que a função setTimeout espera a função que será executada após o tempo e o tempo que o navegador deve aguardar em milisegundos, ou seja, 2000 milisegundos = 2 segundos.

Agora vamos ver para cancelar a execução da função que possui um setTimeout.

<button onclick="myVar = setTimeout(myFunction, 4000)">Começar</button>

<button onclick="clearTimeout(myVar)">Parar</button>

Neste exemplo o botão "Começar" vai exibir nossa mensagem de "Olá mundo" após 4 segundos, mas se clicarmos no botão "Parar" antes disso, a contagem irá parar e a mensagem não irá aparecer após os 4 segundos.