W3cubDocs

/ReactiveX

Debounce

only emit an item from an Observable if a particular timespan has passed without it emitting another item
Open interactive diagram on rxmarbles.com

The Debounce operator filters out items emitted by the source Observable that are rapidly followed by another emitted item.

See Also

Language-Specific Information

RxGroovy implements this operator as throttleWithTimeout and debounce.

Note that the last item emitted by the source Observable will be emitted in turn by this operator even if the source Observable’s onCompleted notification is issued within the time window you specify since that item’s emission. That is to say: an onCompleted notification will not trigger a throttle.

debounce

One variant of throtleWithTimeout/debounce (two names for the same operator variant) throttles at a periodic time interval that you choose by passing in a TimeUnit and a quantity of such units as parameters to the operator.

This variant operates by default on the computation Scheduler, but you can optionally pass in a Scheduler of your choosing as a third parameter.

debounce

There ia also a variant of debounce (that does not have a throttleWithTimeout alias) that throttles the source Observable by applying a function to each item it emits, this function generating an Observable. If the source Observable emits another item before this newly-generated Observable terminates, debounce will suppress the item.

This variant of debounce does not by default operate on any particular Scheduler.

RxJava implements this operator as throttleWithTimeout and debounce.

Note that the last item emitted by the source Observable will be emitted in turn by this operator even if the source Observable’s onCompleted notification is issued within the time window you specify since that item’s emission. That is to say: an onCompleted notification will not trigger a throttle.

debounce

One variant of throtleWithTimeout/debounce (two names for the same operator variant) throttles at a periodic time interval that you choose by passing in a TimeUnit and a quantity of such units as parameters to the operator.

This variant operates by default on the computation Scheduler, but you can optionally pass in a Scheduler of your choosing as a third parameter.

debounce

There ia also a variant of debounce (that does not have a throttleWithTimeout alias) that throttles the source Observable by applying a function to each item it emits, this function generating an Observable. If the source Observable emits another item before this newly-generated Observable terminates, debounce will suppress the item.

This variant of debounce does not by default operate on any particular Scheduler.

debounce

The first variant — called either debounce or throttleWithTimeout — accepts as its parameter a duration, defined as an integer number of milliseconds, and it suppresses any emitted items that are followed by other emitted items during that duration since the first item’s emission.

Sample Code

var times = [
    { value: 0, time: 100 },
    { value: 1, time: 600 },
    { value: 2, time: 400 },
    { value: 3, time: 700 },
    { value: 4, time: 200 }
];

// Delay each item by time and project value;
var source = Rx.Observable.from(times)
  .flatMap(function (item) {
    return Rx.Observable
      .of(item.value)
      .delay(item.time);
  })
  .debounce(500 /* ms */);

var subscription = source.subscribe(
  function (x) {
    console.log('Next: %s', x);
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });
Next: 0
Next: 2
Next: 4
Completed
debounceWithSelector

The debounceWithSelector operator throttles the source Observable by applying a function to each item it emits, this function generating an Observable. If the source Observable emits another item before this newly-generated Observable terminates, debounce will suppress the item.

Sample Code

var array = [
    800,
    700,
    600,
    500
];

var source = Rx.Observable.for(
    array,
    function (x) {
        return Rx.Observable.timer(x)
    })
    .map(function(x, i) { return i; })
    .throttleWithSelector(function (x) {
        return Rx.Observable.timer(700);
    });

var subscription = source.subscribe(
    function (x) {
        console.log('Next: ' + x);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
    });
Next: 0
Next: 3
Completed

debounce and debounceWithSelector are found in each of the following distributions:

  • rx.all.js
  • rx.all.compat.js
  • rx.time.js (requires rx.js or rx.compat.js)
  • rx.lite.js
  • rx.lite.compat.js

RxPHP implements this operator as throttle.

Returns an Observable that emits only the first item emitted by the source Observable during sequential time windows of a specified duration. If items are emitted on the source observable prior to the expiration of the time period, the last item emitted on the source observable will be emitted.

Sample Code

//from https://github.com/ReactiveX/RxPHP/blob/master/demo/throttle/throttle.php

$times = [
    ['value' => 0, 'time' => 10],
    ['value' => 1, 'time' => 200],
    ['value' => 2, 'time' => 400],
    ['value' => 3, 'time' => 500],
    ['value' => 4, 'time' => 900]
];

// Delay each item by time and project value;
$source = Observable::fromArray($times)
    ->flatMap(function ($item) {
        return Observable::of($item['value'])
            ->delay($item['time']);
    })
    ->throttle(300 /* ms */);

$subscription = $source->subscribe($stdoutObserver);
Next value: 0
Next value: 1
Next value: 3
Next value: 4
Complete!

© ReactiveX contributors
Licensed under the Apache License 2.0.
http://reactivex.io/documentation/operators/debounce.html