Alter debounceTime on stream data - rxjs

Question

Silly question that has me stumped. I want to give a different debounceTime based on data in the stream. I have:
const fakeData = [{number: 1}, {number: 2}, {number: 3}];
const stream$ = Rx.Observable.from(fakeData);
const delayedStream$ = stream$.concatMap(x => Rx.Observable.of(x).delay(300));
delayedStream$
.concatMap(x => x.number >=2
? Rx.Observable.of(x).debounceTime(500)
: Rx.Observable.of(x).debounceTime(1000)
)
.subscribe(x => console.log(x));
// expected output: 3
// actual output: 1 ... 2 ... 3 |
http://jsbin.com/dafaxoraca/edit?js,console
The above code simply returns x without a debounce. But if I replace debounceTime with delay, the delay works as expected. I'm obviously missing something fundamental between the two operators. I've gone through the docs and am not getting it.
Thanks for your help!

Answer 1

I can't test this with your actual use-case but you're not using debounceTime correctly.
Operator debounceTime applies debounce only on this Observable stream and its data. Since you're chaining concatMap and the returned Observable with debounceTime, the concat will always wait until the Observable completes. So this always returns all three values.
You can use debounce() that expects to get an Observable that lets you use delay by emitting values instead of hardcoded time.
const fakeData = [{number: 1}, {number: 2}, {number: 3}];
const stream$ = Rx.Observable.from(fakeData);
const delayedStream$ = stream$.concatMap(x => Rx.Observable.of(x).delay(300));
delayedStream$
.debounce(val => Rx.Observable.of(true).delay(val >= 2 ? 500 : 1000))
.subscribe(x => console.log(x.number));
See live demo: http://jsbin.com/tifajodogi/1/edit?js,console
This emits just: 3
Update: Since RxJS 5.5+ the same technique can be restructured like so:
const fakeData = [{number: 1}, {number: 2}, {number: 3}];
const stream$ = from(fakeData);
const delayedStream$ = stream$.pipe(concatMap(x => of(x).pipe(delay(300))));
delayedStream$.pipe(
debounce(val => of(true).pipe(delay(val >= 2 ? 500 : 1000)))
subscribe(x => console.log(x.number))
);