Angular で sleep() 関数を実装する

1. TypeScript の sleep() 関数
2. Angular で sleep() 関数を実装する手順

この記事では、Angular で sleep() 関数を実装する手順について説明し、提供します。

TypeScript の sleep() 関数

Angular の sleep() 関数は、アプリをより便利にする新機能です。 TypeScript では、Angular の sleep() 関数は、指定されたミリ秒数だけプログラムの実行を一時停止できます。

この一時停止により、アプリケーションの応答性が向上し、アプリケーションが不要なコードを実行するのを防ぐことができます。 TypeScript の sleep() 関数は、構文が JavaScript の setTimeout() および setInterval() 関数に似ていますが、動作方法が異なります。

タスクを遅らせるプロセスは、多くの場合、JavaScript のネイティブな setTimeout() または setInterval() 関数を使用して行われます。 ただし、これらの関数には、パフォーマンスと応答性に関して欠点があります。

したがって、Angular チームは sleep() と呼ばれるこの関数のバージョンを導入しました。

Angular で sleep() 関数を実装する手順

TypeScript で Angular sleep() 関数を実装する手順を見てみましょう。

しかしその前に、RxJS ライブラリをインポートする必要があります。 このライブラリは不可欠であり、アプリケーションで使用できる多くの機能があります。

その後、sleep.ts という新しい TypeScript スクリプト ファイルを作成し、次の手順を実装します。

1. 必要なモジュールをインポートします。
2. Angular sleep() 関数を実装します。
3. 関数をテストします。
4. TypeScript ファイルにエクスポートします。

TypeScript コードの例:

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

ここ をクリックして、上記のコードのライブ デモンストレーションを確認してください。