Criar delay de 5 segundos para uma função com JavaScript

Neste artigo você vai aprender a como criar um delay de 5 segundos para uma função com JavaScript, confira como é fácil!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Introdução

Neste artigo, aprenderemos como fazer um delay de 5 segundos para uma função utilizando JavaScript.

Esta técnica pode ser útil em várias situações, como para criar animações, simular carregamento de dados, ou dar tempo ao usuário para ler uma mensagem antes de prosseguir.

Vamos explorar como usar a função setTimeout do JavaScript para atingir esse objetivo.

Usando setTimeout para fazer um delay

JavaScript oferece a função setTimeout que nos permite executar uma função específica depois de um intervalo de tempo determinado.

Para fazer um delay de 5 segundos para uma função, basta passar a função e o intervalo de tempo (em milissegundos) como argumentos para setTimeout.

Exemplo:

function funcaoDeExemplo() {
  console.log('Função executada após 5 segundos');
}

setTimeout(funcaoDeExemplo, 5000);

Neste exemplo, a função funcaoDeExemplo será executada após um delay de 5 segundos (5000 milissegundos).

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Usando funções anônimas e arrow functions

Você também pode usar funções anônimas ou arrow functions como argumento para setTimeout. Veja os exemplos a seguir:

Exemplo com função anônima:

setTimeout(function() {
  console.log('Função executada após 5 segundos');
}, 5000);

Exemplo com arrow function:

setTimeout(() => {
  console.log('Função executada após 5 segundos');
}, 5000);

Ambos os exemplos acima terão o mesmo resultado que o exemplo na Seção 1, executando a função após um delay de 5 segundos.

Lidando com argumentos e escopo

Se você precisar passar argumentos para a função que será executada com delay, você pode fazer isso de duas maneiras:

Usar uma função anônima ou arrow function para encapsular a função desejada e seus argumentos:

function funcaoComArgumentos(arg1, arg2) {
  console.log('Argumento 1:', arg1, ', Argumento 2:', arg2);
}

setTimeout(() => {
  funcaoComArgumentos('Olá', 'Mundo');
}, 5000);

Usar o recurso bind para criar uma nova função que tem os argumentos pré-definidos:

setTimeout(funcaoComArgumentos.bind(null, 'Olá', 'Mundo'), 5000);

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Neste artigo, aprendemos como fazer um delay de 5 segundos para uma função com JavaScript utilizando a função setTimeout.

Essa técnica é útil em diversas situações, como animações, simulações de carregamento e permitindo que o usuário leia mensagens antes de prosseguir.

Com o uso correto de setTimeout e funções anônimas ou arrow functions, você pode adicionar delays de forma eficiente e melhorar a experiência do usuário em seu site ou aplicação.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

Delay com async/await: esperar 5 segundos sem callback

O setTimeout resolve, porém ele joga teu código pra dentro de um callback

Quando a rotina tem vários passos, isso vira aquela escadinha chata de ler

Hoje dá pra escrever o mesmo delay de um jeito bem mais limpo, usando Promise e async/await

A ideia é simples: você cria uma função sleep, que só devolve uma Promise resolvida pelo setTimeout

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

E aí é só esperar por ela dentro de uma função async:

async function minhaRotina() {
console.log('antes do delay')

await sleep(5000)

console.log('5 segundos depois')
}

minhaRotina()

Se liga no detalhe: o await pausa APENAS a função async

O resto da página continua rodando normalmente, nada trava

Tome cuidado com um erro comum: await fora de uma função async o JavaScript não aceita, então lembra do async na declaração 🙂

Como cancelar o delay antes dele executar?

O setTimeout não é uma via de mão única, beleza?

Ele devolve um identificador, e é com esse identificador que você cancela o agendamento

const idDoTimeout = setTimeout(() => {
console.log('isso aqui pode nunca rodar')
}, 5000)

clearTimeout(idDoTimeout)

Parece bobo, mas é justamente o que salva a maioria dos bugs de delay

Pensa nos casos clássicos: o usuário clica em cancelar, sai da tela, ou digita de novo antes dos 5 segundos acabarem

Sem o clearTimeout, a função vai executar do mesmo jeito, mexendo numa tela que já nem existe mais

Então a regra é: se o delay pode deixar de fazer sentido, guarda o id e limpa ele

Delay dentro de um loop: por que tudo dispara junto?

Esse aqui pega todo mundo uma vez na vida

Você coloca um setTimeout dentro de um for esperando um item a cada 5 segundos, e os itens saem TODOS de uma vez

setTimeout(() => console.log(item), 5000)
}

E por que isso acontece?

Porque o loop não espera nada: ele agenda os três timeouts no mesmo instante, e os três vencem no mesmo instante também

Pra ter um delay de verdade ENTRE cada item, o loop precisa esperar, e aí entra o sleep com await:

await sleep(5000)
console.log(item)
}

Só lembra que esse for precisa estar dentro de uma função async

E evita fazer isso com forEach, ele não espera a sua função async terminar, você cai no mesmo problema do começo

O delay de 5 segundos é exato?

Resposta curta: não, e isso é normal

O valor que você passa pro setTimeout é um tempo MÍNIMO de espera, não uma promessa de precisão

Depois que o tempo vence, a função entra na fila e só roda quando a thread do JavaScript estiver livre

Se tem um processamento pesado segurando a página naquele momento, teu callback espera a vez dele

Pra 5 segundos numa animação ou numa mensagem na tela, isso é irrelevante

Pra contagem de tempo real (cronômetro, countdown), o certo é comparar a hora do relógio em vez de confiar na soma dos timeouts

E por favor, não tenta fazer um sleep travando a thread:

// não faça isso
const fim = Date.now() + 5000
while (Date.now() < fim) {}

Isso congela a aba inteira por 5 segundos, ninguém clica em nada, e o usuário acha que teu site morreu

setTimeout ou setInterval?

A diferença é só uma, e é fácil de gravar

O setTimeout executa UMA vez depois do tempo

O setInterval fica repetindo a execução a cada intervalo, até você mandar parar com clearInterval

const id = setInterval(() => {
console.log('isso repete pra sempre')
}, 5000)

clearInterval(id)

Então, pro nosso caso de delay de 5 segundos, o setTimeout é o cara

O setInterval entra quando você quer repetição, tipo atualizar um contador na tela