web-dev-qa-db-ja.com

RxJS.Observableデバウンスは何をしますか？

RxJS Observable debounce function が何をするのか、誰でも簡単な英語で説明できますか？

パラメータに応じてたまにイベントが発生するのではないかと思いますが、以下のコードは期待どおりに動作しません。

var x$ = Rx.Observable.fromEvent(window, 'click')
    .map(function(e) {return {x:e.x, y:e.y};})
    .debounce(1000)
    .subscribe(function(el) {
      console.log(el);
    });

および JsBinバージョン 。

このコードでは、クリック速度に関係なく、1秒に1回のクリックで印刷されると思っていました。代わりに、ランダムな間隔と思われる間隔でクリックを出力します。

javascriptrxjsdebouncing
18
Adrian

デバウンスは、指定された時間間隔が経過した後、別の値が発行されずに値を発行します。

簡単な図を使用すると、次のことがさらに役立ちます。

Stream 1 | ---1-------2-3-4-5---------6----

    after debounce, the emitted stream looks like as follows:

Stream 2 | ------1-------------5---------6-

中間アイテム（この場合は2、3、4）は無視されます。

以下に例を示します。

var Rx = require('rx-node');
var source = Rx.fromStream(process.stdin).debounce(500);
var subscription = source.subscribe(
    function (x) {
        console.log('Next: %s', x);
    }
);

これを説明するためにノードを使用しました...ノードがインストールされていると仮定すると、次のように入力して実行できます

$node myfile.js  (where the aforementioned code is in myfile.js)

このノードプログラムが起動したら、コンソールで値を入力できます。すばやく入力した場合、項目は無視されます。また、入力が断続的に速い場合、遅い項目は、コンソールでの入力のギャップ（上記の例では500ミリ秒です）の後に表示されます。 （"次： "）

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md にも優れた参考資料があります。

20
Eric Broda

Long story short：debounceは、ストリームが新しい値を放出していないX時間待ってから、最新の値を渡します。

ロングストーリー：値が出力されると、デバウンスはX時間の間その出力を一時停止し、別の値が出力されるかどうかを確認します。実際には、この時間中にストリームをブロックします。デバウンス時間中に新しい値が発生した場合、タイマーが再起動され、デバウンスは再びフルタイムで待機します。新しい値が発行されずにタイマーが期限切れになると、最新の値が渡されます。

入力ボックスにオートコンプリートを追加するとします。ユーザーが「a」を挿入した場合、選択肢「acorn、alaska」を表示したい場合がありますが、ユーザーが「l」を押した直後の場合は、「alaska」のみを提案します。この場合、ユーザーがキーボードを押すのを停止して、不要な作業を行わないようにすることをお勧めします。ここで適切なツールであるとデバウンスします：ストリームが新しい値を出力していないX時間待機します

9
Riccardo Galli

.debounce() 指定された間隔内に値が受信されなかった場合、最後に受信された値を生成します。

つまり、1秒以内にクリックするとすぐに、何も生成されません。

毎秒以下の頻度で値が出力されるようにスロットルしたい場合は、代わりに .sample(1000) を使用する必要があります。

5
zerkms