2016-03-12 18 views
5

最初と最後のデバウンスされたイベントを得るためにrx演算子の組み合わせはありますか?最初と最後のデバウンス演算子

これは、最初に選択したアイテムを直ちにロードし、最後のユーザーが選択を変更しないようにする、マスター詳細シナリオ(またはシナリオのシナリオ)で使用されます。

これにより、ユーザがゆっくりとナビゲートするときにデバウンス時間が注入されるのを防ぎますが、変更のバーストも防止します。

debounceオペレータがunderscore.jsのようなオプション「immediate」を持っている場合debounce functoin 2つのバージョンのデバウンス演算子をマージすると、必要な結果が生成されます。

答えて

8

最初に破棄された要素を取得するには、throttleを使用できます。最後になるには、debounceを使用してください。ただし、両方の演算子を同じソースに適用するため、デバウンスまたは調整しているソースがホットなソースであることを確認する必要があります。次に、両方の要素を同じ観測可能にする場合は、調整したストリームとデバウンスしたストリームをマージするだけです。例えば

、ソースが観察source$を呼び出す:

firstAndLast$ = Rx.Observable.merge(source$.debounce(Xms), source$.throttle(Xms)) 

これは最初の項目と同じストリームにおけるバーストの最後の項目を発行する必要があります。エッジケースでは、これはバーストではなく、Xms時間内に発生している単一の値であることに注意してください。同じ値を2回、期間の先頭に1つ、最後に1つ指定することができます。それは理にかなっている場合は、その保護するための方法は、distinctUntilChangedを使用することですので、これは次のようになります。

firstAndLast$ = Rx.Observable.merge(source$.debounce(Xms), source$.throttle(Xms)).distinctUntilChanged() 
+0

私は知っていると感謝のためのrem inderしかし、これは公式のドキュメンテーションです。私はどんな場合でも私の答えを更新します。 – user3743222

+0

これは正式な文書ですが、Stack Overflowはサイトを制御しないため、URLが壊れたり単純に編集されて無効になることがあります。変更されていないサードパーティのサイトに依存しないことが常にベストです。 – Enigmativity

1

UX-優しい行動とのハイブリッドオペレーター:https://www.npmjs.com/package/rx-op-debounce-throttle

最初に放出し、バッチ内の最後の項目、ウィンドウ内のできるだけ多くのイベントを、少なくともX msで区切って表示します。

2

前の答えで示唆したようにスロットルとデバウンスを組み合わせるだけでは、スロットル時間がなくなったときに定期的に新しいイベントが発生するため、私には不十分でした。 time=30

const debounced$ = source$.debounceTime(time) 
return source$.throttleTime(time) 
    .merge(debounced$).distinctUntilChanged() 

あなたが得るだろう:私だけが使用の間に最小限の時間との最初と最後のイベントを取得

-a-a-a-a-a-a---- 
-a---a---a----a- 

へ:

:その結果

const debounced$ = source$.debounceTime(time) 
return source$.throttle(() => debounced) 
    .merge(debounced$).distinctUntilChanged() 

-a-a-a-a-a-a---- 
-a------------a- 
関連する問題