Angular 5 の$interval

1. AngularJS の $interval サービス
2. Angular 5 で静的時間と Take メソッドを使用する

AngularJS$interval は、一定の時間間隔で関数を実行する方法でした。Angular 5 では、同じことを行うために使用できる RxJS ライブラリにタイマー静的メソッドがあります。

静的タイマーメソッドは 2つの引数を取ります。1つ目はミリ秒単位の間隔で、2つ目はこの間隔が経過したときに呼び出されるオプションの関数です。

テイク演算子を使用すると、監視可能なシーケンスが完了したときに保留中のタイマーをキャンセルできます。最初に $interval メソッドについて詳しく説明してから、Angular のタイマーstatic メソッドと take operator に移ります。

AngularJS の $interval サービス

AngularJS の $interval サービスは、JavaScript の setInterval() メソッドと同じことを行います。 $interval 変数は setInterval() メソッドのラッパーであり、テスト目的で簡単に変更、削除、または模倣できます。

setInterval 関数は、少なくとも 1 回呼び出されている限り、ミリ秒単位の間隔で指定された関数を繰り返し実行します。

setInterval への最初の呼び出しは、指定された関数をすぐに実行し、その後、clearInterval が間隔オブジェクト自体で実行されるまで、指定されたミリ秒数ごとに実行されます。

例：

let timer = setInterval(() => alert('start'), 1000);

// after 20 seconds

setTimeout(() => { clearInterval(timer); alert('stop'); }, 10000);

Angular 5 で静的時間と Take メソッドを使用する

静的時間は Angular 5 の新機能であり、開発者はアプリケーションのデータのタイムゾーンを設定できます。これは、タイムゾーンの値を Static Time サービスに渡すか、アプリケーション構成パラメーターとして選択することにより、実行時に実行できます。

この機能は、開発者がデータ文字列を手動で変換することなく、異なるタイムゾーンのデータで Angular 5 を使用できるようにするために追加されました。Take メソッドは、開発者が特定の操作に時間がかかる場合に中止されるまでにかかる時間を指定できるもう 1つの新機能です。

サンプルコード：

import { Component, VERSION } from '@angular/core';
import { Observable, timer } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  counter$: Observable<number>;
  count = 5;
  ngOnInit() {
    this.counter$ = timer(0, 5000)
      .pipe(
        take(5),
        map(() => (this.count))
      );
    this.counter$.subscribe((c) => {
      console.log(c);
    }, () => {}, () => {
      console.log('Done', this.count);
    });
  }
}

実行コード