Implementando uma Função de Sleep em TypeScript

Após este artigo você estará implementando uma Função de Sleep em TypeScript em projetos Angular ou de outros tecnologias

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

No desenvolvimento de aplicações Angular com TypeScript, pode surgir a necessidade de pausar a execução de um trecho de código por um determinado período. Isso é comumente conhecido como função de “sleep”.

Embora JavaScript e TypeScript não incluam uma função de sleep nativa, é possível implementar uma solução eficaz utilizando Promises e a função setTimeout.

Este artigo discute como criar uma função de sleep em TypeScript e como utilizá-la em um contexto Angular.

Entendendo a Necessidade da Função Sleep

Em programação, uma função de sleep é usada para fazer uma pausa na execução de um código por um tempo determinado.

Em aplicações web, isso pode ser útil para simular atrasos, controlar o tempo de execução de animações ou esperar por algum evento assíncrono.

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Por que JavaScript/TypeScript não tem Sleep Nativo?

JavaScript e TypeScript são projetados para serem linguagens não bloqueantes, o que significa que a execução de funções de sleep nativas, que pausariam todo o processamento, iria contra esse design.

No entanto, com o uso de Promises e setTimeout, é possível criar uma função de sleep que não bloqueie o event loop.

Implementando a Função Sleep em TypeScript

A implementação de uma função de sleep em TypeScript para uso em Angular pode ser feita seguindo os passos abaixo.

Criando a Função Sleep

A função sleep pode ser criada utilizando Promises e setTimeout. A Promise será resolvida após o tempo especificado pelo setTimeout.

Exemplo de Função Sleep

function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Neste exemplo, sleep é uma função que retorna uma Promise, que se resolve após um número especificado de milissegundos.

Usando a Função Sleep em Componentes Angular

Uma vez que a função de sleep está definida, você pode utilizá-la em seus componentes Angular.

Exemplo de Uso em um Componente Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-meu-componente',
  template: `<p>Exemplo de componente</p>`
})
export class MeuComponenteComponent {
  async operacaoComSleep() {
    console.log('Iniciando operação...');
    await sleep(2000); // Espera por 2 segundos
    console.log('Operação concluída após 2 segundos');
  }
}

Neste exemplo, a função operacaoComSleep utiliza await para aguardar a resolução da Promise retornada por sleep, pausando a execução por 2 segundos antes de continuar.

Boas Práticas ao Usar Funções de Sleep

• Evite Bloquear o Event Loop: Lembre-se de que o uso de sleep não deve bloquear o event loop. Utilize a função de sleep assíncrona para evitar impactos no desempenho.
• Use com Moderação: Funções de sleep devem ser usadas com moderação e apenas quando necessário. Abusar dessa funcionalidade pode levar a uma experiência de usuário ruim.
• Teste Thoroughly: Teste cuidadosamente qualquer lógica que inclua sleep para garantir que ela se comporte como esperado.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

A implementação de uma função de sleep em TypeScript para aplicações Angular oferece uma maneira eficaz de pausar a execução do código de forma assíncrona e não bloqueante.

Embora o JavaScript e o TypeScript não forneçam uma função de sleep nativa, a abordagem usando Promises e setTimeout é uma solução poderosa que se alinha com o design assíncrono e não bloqueante dessas linguagens.

Ao utilizar essa função de sleep de forma responsável e com moderação, você pode adicionar atrasos controlados em sua aplicação Angular sem sacrificar a experiência do usuário.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.

Como fazer sleep de 5 segundos (ou qualquer tempo):

Repara que o setTimeout trabalha em milissegundos, não em segundos

Então pra pausar por um tempo em segundos é só multiplicar por 1000

1 segundo vira 1000, 3 segundos viram 3000, e 5 segundos viram 5000

Na prática, pra esperar 5 segundos fica assim:

await sleep(5000); // espera 5 segundos

Se quiser deixar mais legível dá pra escrever a conta direto na chamada:

await sleep(5 * 1000); // 5 segundos, bem explícito

Mesma ideia pra qualquer valor: pega os segundos que você quer e multiplica por 1000 =)

Perguntas frequentes sobre sleep em TypeScript e Angular:

O sleep trava a aplicação Angular?

Não, e esse é o ponto

Como a função usa Promise com setTimeout e você chama com await, só aquele fluxo assíncrono espera

O event loop continua livre, a interface não congela e o resto da aplicação segue respondendo

Como fazer sleep dentro de um loop?

Basta usar await sleep(ms) dentro de um for que seja async

Assim cada volta do loop espera o tempo que você definiu antes de seguir pra próxima

Dá pra usar essa mesma função em React, Node ou TypeScript puro?

Dá sim

A função sleep não depende de nada do Angular, ela é TypeScript puro em cima de Promise e setTimeout

Então você leva o mesmo código pra qualquer projeto e ele funciona igual