Angular8のtypescriptでsleep処理を実装する

よく忘れてしまうので、書き留めておきます。

Angularを使っていてsleep処理を実装したいときは、Observavleとrxjsライブラリのoperatorsにある”delay”を使います。

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

実際にdelayさせる処理は以下。

const delay_observable = of('').pipe(delay( *msec* ));
delay_observable.subscribe(s => { delay後の処理 });

delay内の*msec*には、delayさせたい時間をミリ秒単位で指定します。

例えば、ページが表示されたときに、３秒遅れてconsole.logを出力される場合、以下のように実装します。

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

export class DelayComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    const delay_observable = of('').pipe(delay( 3000 ));
    delay_observable.subscribe(s => { console.log("delay!") });
  }
}