😽

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

2 min read

前提

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

timer

  • observable を作る
  • 指定された期間で、数字を emit する
//1秒後に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

  • 指定された期間の中で値を無視する。
  • 期間で区切った時の古い値を出力する
//1秒たつと出力さ荒れる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 の出力を指定された期間分遅らせる
  • 期間で区切った時の、古い値を出力
//1秒たつと出力さ荒れるobsservable
const source = interval(1000);
//5秒間まつ。最後にemitされた値を出力する
const example = source.pipe(debounceTime(5000));
const subscribe = example.subscribe((val) => console.log(val));
//intervalで5秒たった後に、さらに5秒待って出力される
4...9...14

throttleTime

  • 指定された期間の中で値を無視する
  • 期間の中で、新しい値を取り出す
//1秒たつと出力さ荒れる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);
//1秒までに出された値を配列で返すようにする
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 をだす。
//5秒後に値がemitされる
const time = time(5000);
//1秒で値が出されなかったらerrorをだす
const source = time.pipe(timeout(1000));
source.subscribe((catchError) => console.log("error"));
"error";

Discussion

ログインするとコメントできます