Rx DebounceTime does not work

Question

Following the documentation of rxjs and different guide pages, does not solve my problem that debounceTime does not work.

function getValue() {
  return new rxjs.Observable(sub => {
    let counter = 0;
    setInterval(() => {
      counter++;
      sub.next(counter);
    }, 100);
  });
}


// Removing debounceTime works or set it to a value < 100.
getValue().pipe(rxjs.operators.debounceTime(1000)).subscribe(data => {
  console.log(data);
});

https://jsfiddle.net/5bp1cwho/7/

I expected that the value comes every seconds instead of 100 ms.

Answer 1

debounceTime

signature: debounceTime(dueTime: number, scheduler: Scheduler): Observable

Discard emitted values that take less than the specified time between output

All your emitted items are spaced by less than 1000ms, so they are discarded.

Note : by default, the first item is not emitted directly.

If you want to get only the last operation auditTime is the operator you are searching for.

auditTime

Ignores source values for duration milliseconds, then emits the most recent value from the source Observable, then repeats this process.

function getValue() {
  return rxjs.interval(100);
}


// keep the last element after 1000ms 
getValue().pipe(rxjs.operators.auditTime(1000)).subscribe(data => {
  console.log(data);
});

If you want to do a specific processing of all the elements received within the 1000ms, you can use bufferTime.

bufferTime

signature: bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, scheduler: Scheduler): Observable Collect emitted values until provided time has passed, emit as array.

function getValue() {
  return rxjs.interval(100);
}

getValue().pipe(
  rxjs.operators.bufferTime(1000), 
  rxjs.operators.map(itemsList => Math.max(itemsList))
)
.subscribe(data => {
  console.log(data);
});