Como “Pausar” ou “Atrasar” um script JavaScript

Embora em algumas situações possa soar como uma “gambiarra” pausar ou até mesmo atrasar a execução de um script ou função JS pode ser uma boa ideia, ou necessária.

Este atraso pode ser feito facilmente como esta simples arrow function.

setTimeout(() => {  codigo JS aqui }, 1000); // supondo que queira atrasar 1seg.

Veja alguns exemplos no quais podemos aplicar o setTimeout();

.

Atrasar o reload de uma página com JavaScript

Se você fez uma requisição AJAX e precisa atualizar a página após a requisição, pode simplesmente aplicar o exemplo acima desta forma;

// aumente ou diminua o tempo de 1000 se achar necessário
setTimeout(() => {  location.reload(); }, 1000); 

.

Atrasar a execução de uma função JavaScript

Para atrasar uma função JS podemos usar as funções setTimeout() e também a sleep(), eu falo mais sobre a sleep() no próximo tópico deste artigo.

Supondo que você já tenha uma função JS escrita, pode então fazer o atraso dela festa forma;

setTimeout(() => {  funcaoJS(); }, 1000);

funcaoJS() {
 // código da função aqui...
}

.

Executar a mesma função JavaScript várias vezes em um intervalo.

Este é um clássico, supondo que você tenha que executar a mesma função várias vezes em um mesmo intervalo de tempo, podemos de novo resolver isso com o setTimeout() de uma forma elegante e simples, veja este exemplo;

<span></span>
<script>
function Atualiza() {
  var texto = document.querySelector('span');
  texto.innerHTML = texto.innerHTML + "oi ";
  setTimeout(() => { Atualiza() }, 1000); // Escreve Oi a cada 1 seg.
}  
Atualiza();
</script>

Veja o código em ação neste GIF:

.

Como Criar um Countdown com JavaScript?

Agora vamos para um exemplo mais prático, vamos criar um countdown usando o mesmo código acima.

<span>0</span>
<br/>
Visitas diárias no Blogson

<script>
function Atualiza() {
  var texto = document.querySelector('span');
  contador = (texto.innerHTML * 1) + 20; 
  texto.innerHTML = contador;
  if (contador < 1000) setTimeout(() => { Atualiza() }, 10); 
}  
Atualiza();
</script>

O resultado será este;

Dica: Se realmente precisa criar um countdown, eu recomendo que conheça e aprenda o uso da biblioteca countdown.js.