Implementieren der sleep()-Funktion in Angular

1. die sleep()-Funktion in TypeScript
2. Schritte zum Implementieren einer sleep()-Funktion in Angular

In diesem Artikel werden die Schritte zur Implementierung der Funktion sleep() in Angular erläutert und bereitgestellt.

die sleep()-Funktion in TypeScript

Die Angular-Funktion sleep() ist eine neue Funktion, die Ihre App nützlicher macht. In TypeScript kann die Angular-Funktion sleep() die Ausführung eines Programms für eine bestimmte Anzahl von Millisekunden anhalten.

Diese Pause kann die Anwendung reaktionsschneller machen und die Anwendung daran hindern, unnötigen Code auszuführen. Die Funktion sleep() in TypeScript ähnelt in ihrer Syntax den Funktionen setTimeout() und setInterval() von JavaScript, unterscheidet sich jedoch in ihrer Funktionsweise.

Der Vorgang des Verzögerns von Aufgaben wird häufig mit den nativen Funktionen setTimeout() oder setInterval() von JavaScript durchgeführt. Diese Funktionen haben jedoch Nachteile in Bezug auf Leistung und Reaktionsfähigkeit.

Daher stellte das Angular-Team seine Version dieser Funktion namens sleep() vor.

Schritte zum Implementieren einer sleep()-Funktion in Angular

Sehen wir uns die Schritte zur Implementierung der Angular-Funktion sleep() in TypeScript an.

Aber vorher müssen wir die RxJS-Bibliothek importieren. Diese Bibliothek ist unerlässlich und hat viele Funktionen, die wir in unserer Anwendung verwenden können.

Danach erstellen wir eine neue TypeScript-Skriptdatei namens sleep.ts und implementieren die folgenden Schritte:

1. Importieren Sie die erforderlichen Module.
2. Implementieren Sie die Angular-Funktion sleep().
3. Testen Sie die Funktion.
4. Exportieren Sie es in eine TypeScript-Datei.

Beispiel für TypeScript-Code:

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;
  }
}

Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.