Implementar la función sleep() en Angular

Este artículo discutirá y proporcionará los pasos para implementar la función sleep() en Angular.

la función sleep() en TypeScript

La función Angular sleep() es una nueva característica que hará que su aplicación sea más útil. En TypeScript, la función Angular sleep() puede pausar la ejecución de un programa durante un número específico de milisegundos.

Esta pausa puede hacer que la aplicación responda mejor y evitar que la aplicación ejecute código innecesario. La función sleep() en TypeScript es similar a las funciones setTimeout() y setInterval() de JavaScript en su sintaxis, pero difiere en cómo funciona.

El proceso de retrasar tareas a menudo se realiza utilizando las funciones nativas de JavaScript setTimeout() o setInterval(). Sin embargo, estas funciones tienen inconvenientes en lo que respecta al rendimiento y la capacidad de respuesta.

Por lo tanto, el equipo de Angular presentó su versión de esta función, llamada sleep().

Pasos para implementar una función sleep() en Angular

Veamos los pasos para implementar la función Angular sleep() en TypeScript.

Pero antes de eso, necesitamos importar la biblioteca RxJS. Esta librería es fundamental, y tiene muchas funciones que podemos utilizar en nuestra aplicación.

Después de eso, crearemos un nuevo archivo de script TypeScript llamado sleep.ts e implementaremos los siguientes pasos:

1. Importe los módulos necesarios.
2. Implementar la función Angular sleep().
3. Pruebe la función.
4. Expórtelo a un archivo TypeScript.

Ejemplo de código mecanografiado:

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string;
  ngOnInit() {
    const delay = 1000;
    this.sleep(delay)
      .then(() => this.title = '1')
      .then(() => this.sleep(delay))
      .then(() => this.title += '2')
      .then(() => this.sleep(delay))
      .then(() => this.title += '3')
      .then(() => this.sleep(delay))
      .then(() => this.title += '4')
      .then(() => this.sleep(delay))
      .then(() => this.title += '5')
  }
  sleep(milliseconds: number) {
    let resolve: { (): any; (value: unknown): void; };
    let promise = new Promise((_resolve) => {
      resolve = _resolve;
    });
    setTimeout(() => resolve(), milliseconds);
    return promise;
  }
}

Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.