Observable の遅延作成

Angular, TypeScript, Observable: 遅延のある Observable を作成する方法

JavaScript

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

const source$ = of('Hello, world!');
const delayedSource$ = source$.pipe(delay(2000)); // 2秒遅延

delayedSource$.subscribe(value => {
  console.log(value); // 2秒後に "Hello, world!" が出力される
});

TypeScript

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

const source$: Observable<string> = of('Hello, world!');
const delayedSource$: Observable<string> = source$.pipe(delay(2000)); // 2秒遅延

delayedSource$.subscribe(value => {
  console.log(value); // 2秒後に "Hello, world!" が出力される
});

解説

1. of
   of 演算子は、指定した値を Observable に変換します。この例では、'Hello, world!' という文字列を Observable に変換しています。
2. delay
   delay 演算子は、Observable のエミットを指定した時間だけ遅延させます。この例では、2000 を指定しているので、source$ のエミットが 2 秒遅延されます。
3. subscribe
   subscribe メソッドは、Observable のエミットを購読し、エミットされた値に対してコールバック関数を呼び出します。この例では、2 秒後に 'Hello, world!' が出力されます。

日本語解説

1. of
   of 演算子は、指定した値を Observable に変換します。
2. delay
   delay 演算子は、Observable のエミットを指定した時間だけ遅延させます。
3. subscribe
   subscribe メソッドは、Observable のエミットを購読し、エミットされた値に対してコールバック関数を呼び出します。

Observable の遅延作成: コード解説

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

const source$ = of('Hello, world!');
const delayedSource$ = source$.pipe(delay(2000)); // 2秒遅延

delayedSource$.subscribe(value => {
  console.log(value); // 2秒後に "Hello, world!" が出力される
});

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

const source$: Observable<string> = of('Hello, world!');
const delayedSource$: Observable<string> = source$.pipe(delay(2000)); // 2秒遅延

delayedSource$.subscribe(value => {
  console.log(value); // 2秒後に "Hello, world!" が出力される
});

1. Observable の作成
   

2. 遅延の適用
   

   • delay 演算子を使用して、Observable のエミットを 2 秒遅延させます。
   • delay(2000) は、2000 ミリ秒 (2 秒) の遅延を指定しています。
3. • subscribe メソッドを使用して、遅延された Observable を購読します。
   • エミットされた値 ('Hello, world!') がコンソールに出力されます。

import { timer, map } from 'rxjs';

const delayedSource$ = timer(2000).pipe(map(() => 'Hello, world!'));

• map 演算子を使用して、エミットされた値を 'Hello, world!' に変換します。
• timer 演算子は、指定した時間後に Observable をエミットします。

interval 演算子

import { interval, take, map } from 'rxjs';

const delayedSource$ = interval(2000)
  .pipe(take(1))
  .pipe(map(() => 'Hello, world!'));

• take(1) を使用して、最初のエミットのみを取得します。

asyncScheduler と delay 演算子

import { asyncScheduler, delay, of } from 'rxjs';

const delayedSource$ = of('Hello, world!').pipe(delay(2000, asyncScheduler));

• asyncScheduler は、非同期スケジュールを提供します。

import { timeout, of } from 'rxjs';

const delayedSource$ = of('Hello, world!').pipe(timeout(2000));

• timeout 演算子は、指定した時間内にエミットされない場合にエラーを発生させます。