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させたい時間をミリ秒単位で指定します。

例えば、ページが表示されたときに、3秒遅れて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!") });
  }
}

まとめ

今回は、AngularのTypescriptを使っている際にdelay処理を実装する方法を説明しました。

使いどころが多いので、ぜひ覚えておくと便利かと思います。

参考

Stack Overflow – TypeScript Sleep

Typescript sleep
I'm developing a website in Angular 2 using Typescript and I was wondering if there was a way to implement thread.sleep(ms) functionality. My use case is to re...

コメント

タイトルとURLをコピーしました