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).

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!