image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image

IL

Isaque Liberato16/08/2023 09:44
Compartilhe

Explorando a Função `setTimeout()` em JavaScript

  • #JavaScript

Por Isaque Liberato

Introdução

alert(Olá Mundo!)...

No vasto mundo do desenvolvimento web, JavaScript é a linguagem que impulsiona a interatividade e dinamismo das páginas. Entre suas muitas funcionalidades, a função `setTimeout()` desempenha um papel vital ao permitir que ações sejam agendadas para ocorrer após um determinado intervalo de tempo. Neste artigo, vamos desvendar o poder da função `setTimeout()` e entender como ela é usada para adicionar atrasos intencionais nas operações do seu código.

O Que é `setTimeout()`?

image

Imagine a função `setTimeout()` como um temporizador digital. Ela permite que você diga ao JavaScript: "Espere um pouco e, depois desse tempo, execute esta ação específica." Essa capacidade é especialmente útil para animações suaves, adiamento de atualizações de interface ou execução de tarefas assíncronas.

Sintaxe Básica

A sintaxe básica da função `setTimeout()` é a seguinte:

setTimeout(função, tempo);

- `função`: A função que você deseja executar após o tempo definido.

- `tempo`: O tempo, em milissegundos, que você deseja aguardar antes de executar a função.

Link para a documentação oficial da função setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

Exemplo de Uso

Aqui está um exemplo simples para ilustrar como o `setTimeout()` funciona:

function saudacaoAtrasada() {

 console.log("Olá, depois de 2 segundos!");

}

setTimeout(saudacaoAtrasada, 2000); // Aguarda 2 segundos (2000 milissegundos) antes de executar

Aplicações Práticas

A utilidade do `setTimeout()` se torna evidente quando aplicada a situações do mundo real. Suponha que você queira criar um efeito de transição suave para uma mensagem de pop-up em um site. Você pode atrasar o aparecimento do pop-up com o `setTimeout()`, criando uma experiência mais agradável para o usuário.

Confira o a seguir:

const popup = document.getElementById('popup');

function mostrarPopup() {
popup.style.opacity = '1'; // Torna o pop-up visível
}

function fecharPopup() {
popup.style.opacity = '0'; // Torna o pop-up invisível
}

// Mostra o pop-up após 3 segundos
setTimeout(mostrarPopup, 3000);


// Fecha o pop-up após 5 segundos
setTimeout(fecharPopup, 8000);


**Dica Pro**: Use o `setTimeout()` em conjunto com outras funções para criar animações complexas ou para realizar tarefas específicas após um determinado tempo.

Conclusão

A função `setTimeout()` é uma ferramenta poderosa e valiosa para qualquer desenvolvedor JavaScript. Ela permite que você crie atrasos estratégicos no fluxo do seu código, abrindo portas para animações suaves, experiências do usuário melhoradas e tarefas assíncronas eficientes. Com um entendimento básico da sintaxe e do conceito por trás do `setTimeout()`, você está pronto para adicionar a precisão do tempo aos seus projetos web e torná-los ainda mais dinâmicos e cativantes.

Obrigado pelo tempo fornecido e até a próxima para mais conteúdos relacionados á essa linguagem de programação que amamos, Bye Bye Dev´s.

Compartilhe
Comentários (1)

IL

Isaque Liberato - 16/08/2023 09:46

Você tem um tempinho?