RxJSの時間に関するoperatorをまとめる

前提

Observableについて学ばなければいけません。

timer

• observableを作る
• 指定された期間で、数字をemitする

//１秒後にemitされるobservableを作成
const source = timer(1000)
source.subscrive(val => console.log(val));

0

interval

• observableを作る
• 指定された時間単位で,連続的に数字をemitする

//1秒ごとにemitされるobservableを作成
const source = interval(1000)
source.subscribe(val => console.log(val))

//unsubscribeするまで無限にemitされる
0,1,2,3,4,5,6.....

auditTime

• 指定された期間の中で値を無視する。
• 期間で区切った時の古い値を出力する

//１秒たつと出力さ荒れるobsservable
const source = interval(1000);
//5秒間まつ。最後にemitされた値を出力する
const example = source.pipe(auditTime(5000));
const subscribe = example.subscribe(val => console.log(val));

4...9...14

debounceTime

• valueの出力を指定された期間分遅らせる
• 期間で区切った時の、古い値を出力

//１秒たつと出力さ荒れるobsservable
const source = interval(1000);
//5秒間まつ。最後にemitされた値を出力する
const example = source.pipe(debounceTime(5000));
const subscribe = example.subscribe(val => console.log(val));

//intervalで５秒たった後に、さらに5秒待って出力される
4...9...14

throttleTime

• 指定された期間の中で値を無視する
• 期間の中で、新しい値を取り出す

//１秒たつと出力さ荒れるobsservable
const source = interval(1000);
//5秒間まつ。最後にemitされた値を出力する
const example = source.pipe(throttleTime(5000));
const subscribe = example.subscribe(val => console.log(val));

 0...6...12

bufferTime

• 指定された期間の中でemitを制御し、その間emitされる値を集めて配列でemitする

//0.5秒に一回emitされるobservable
const source = interval(500);
//１秒までに出された値を配列で返すようにする
const subscription = source.pipe( bufferTime(1000));
subscription.subscribe(val => console.log(val));

[0,1], [2,3], [4,5]....

delay

• 指定された時間分emitされるタイミングを遅らせる

const example = of(null);

//格observableにdelayをつけてタイミングを遅らせる
const message = merge(
  example.pipe(mapTo('Hello')),
  example.pipe(
    mapTo('World!'),
    delay(1000)
  ),
  example.pipe(
    mapTo('Goodbye'),
    delay(2000)
  ),
  example.pipe(
    mapTo('World!'),
    delay(3000)
  )
);
const subscribe = message.subscribe(val => console.log(val));

 'Hello'...'World!'...'Goodbye'...'World!'

timeout

• 指定された期間にemitされない場合にerrorをだす。

//５秒後に値がemitされる
const time = time(5000);
//１秒で値が出されなかったらerrorをだす
const source = time.pipe(timeout(1000));
source.subscribe(catchError => console.log("error"));

"error"