Usando a função setTimeout() para colocar delay no código
Ao redigirmos nosso código, em certos cenários, torna-se indispensável a inclusão de um intervalo de tempo entre diferentes eventos. Essa medida visa garantir que a execução de uma determinada ação no código não prejudique a realização de outra subsequente.
A inserção de um atraso estratégico entre eventos permite um fluxo mais controlado e ordenado das operações, evitando interferências indesejadas entre as ações programadas. Isso ajuda a manter a ordem das atividades e a garantir o funcionamento fluido do programa, sendo aconselhável incluir intervalos temporais para sincronizar ações e alcançar os resultados desejados, especialmente diante de interações complexas no código.
A função setTimeout() do JavaScript define um conjunto de regras que será processado após um determinado período de tempo predefinido.
setTimeout(() => {
// Codigo que será executado
}, tempo do contador);
Com essa função é possível definir o tempo de delay, e o que será executado ao fim desse delay.
Um exemplo de uso prático do setTimeout( )
setTimeout(() => {
console.log("Essa mensagem demorou 1 segundo para ser transmitida");
}, 1000);
Aqui, a mensagem do console.log só vai aparecer na tela de console, depois de 1 segundo que o código foi executado. Porém, a função setTimeout() não impede que o código seguinte a ela, tenha um delay.
setTimeout(() => {
console.log("Atraso de 3 segundos");
}, 3000);
setTimeout(() => {
console.log("Atraso de 2 segundos");
}, 2000);
setTimeout(() => {
console.log("Atraso de 1 segundo");
}, 1000);
setTimeout(() => {
console.log("Atraso de meio segundo");
}, 500);
No caso de uma estrutura como essa anterior, a ordem de realização dos códigos é definida pelo tempo de delay selecionado. Então, por mais que o primeiro setTimeout() esteja com delay de 3 segundos, ele será o último a ser apresentado na tela.
Atraso de meio segundo
Atraso de 1 segundo
Atraso de 2 segundos
Atraso de 3 segundos
Para que se tenha um delay com o código aninhado, ou seja, um dentro de outro, é necessário fazer a indentação desse delay interno, dentro do delay externo, conforme o exemplo que se segue.
setTimeout(() => {
console.log(“Atraso de 3 segundos”);
const numero = 15;
setTimeout(() => {
console.log("Atraso de 2 segundos para imprimir na tela o valor do numero:", numero);
const numero2 = numero * 4;
setTimeout(() => {
console.log(“Atraso de 1 segundo para imprimir na tela o valor do numero2:”, numero2);
}, 1000);
}, 2000);
}, 3000);
Nesse caso, a conta só vai acontecer depois de 5 segundos e a impressão do valor na tela só será feita depois de 6 segundos. O fluxo acontecerá da seguinte forma: ativa-se o primeiro console.log depois de 3 segundos, cria o numero, imprime o segundo console.log com o valor de número e realiza a conta depois de mais 2 segundos e por fim depois de mais 1 segundo, imprime o terceiro console.log com o valor da conta do número 2 que vai ser igual a 60.
Atraso de 3 segundos
Atraso de 2 segundos para imprimir na tela o valor do numero: 15
Atraso de 1 segundo para imprimir na tela o valor do numero2: 60
Algumas outras aplicações possíveis para o setTimeout() incluem usá-lo para colocar um tempo, para às vezes remover algum atributo ou coisa do tipo de uma das tags, por exemplo, quando estamos fazendo uma animação para uma mudança na página e adicionamos uma classe para ela ativar, mas queremos que ela saia logo quer terminar de fazer a animação que queremos. Observe-se como podemos usar a função para isso:
const item = document.getElementById(‘item-da-pagina’);
item.classList.add(‘animação’);
setTimeout(() => {
item.classList.remove(‘animação’);
}, 3000);
O que essa função vai fazer é: Adicionar a classe animação no item selecionado, e depois de 3 segundos, essa classe será removida. O que faz com que essa classe em questão fique durante 3 segundos.
Enfim, essa é a função setTimeout(). Não tenha medo de experimentar com ela.
Para mais detalhes consulte a documentação a documentação disponível em: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
