More than 5 years have passed since last update.

RxJS operatorsの旅【１】auditTimeとthrottleTime

Last updated at 2019-07-17Posted at 2019-07-17

みなさん、RxJS使っていますか？

フロントエンドフレームワークとしてAngularを採用している場合は、嫌でもRxJSに触れることになると思います。沢山あるRxJSのオペレーターと仲良くなるのが上達への近道なのでアウトプットも兼ねてやっていこうと思います

auditTime と throttleTime の違い

auditTimeより引用

auditTime(duration) は、ソースのstreamからデータが流れてきてからduration(ミリ秒)だけ待ってからその時点での最新の値をemitします。

頻繁に変わる値を間引きたい場合に有効です。似たoperatorとして debounceTimeもありますが、debounceTimeの場合は値が安定する場合までは値がemitされないという特徴があります。

throttleTime(duration) は、ソースのstreamからデータが流れてきてからemitし、その後duration(ミリ秒)の間は値をemitせずに無視します。

アニメーションやトランジションのあるUIの操作に対する連打を防ぐ等のシチュエーションで有効です

どちらも　「値を間引く」「値が頻繁に変わっても、その間隔をduration以上に保てる」といった特徴があります。しかし、「はじめの値が来てから一定時間後にemit」と「はじめの値が来たらemitし、その後一定時間emitしない」という違いがあります。

operatorは沢山あって使いこなせないことが多いですが、１つ１つの機能を見ていくとシンプルな設計になっていて、使い所を考えることで習得に繋がりそうです。