rxjs observable debounceTime inner next ignored

Question

It seems that debounceTime ignores inner calls to it's subjects next method:

var subject: Subject<number> = new Subject<number>();

subject.pipe(
    tap((a) => console.log("tab:" + a)), 
    debounceTime(300), 
).subscribe((a) => {
    console.log(a);
    subject.next(100)
});

subject.next(19);
subject.next(20);

the code above should create an infinite loop - but it does not:

tab:19
tab:20
20
tab:100

if I add a delay(1) to the pipe it works as expected:

subject.pipe(
    tap((a) => console.log("tab:" + a)), 
    debounceTime(300), 
    delay(1)
).subscribe((a) => {
    console.log(a);
    subject.next(100)
});

am I missing something?

Edit: added an example: https://typescript-fbt2mn.stackblitz.io

This usage looks like an edge-case to me, I never had to do something similar. It looks RxJS "resets" the debounce time after it notified the Observers, which is a synchronous operation since an older version of RxJS. Let me reverse the question, what behavior are you trying to achieve and do you have any problems with your workaround? — Tamas Hegedus, Apr 24 '18 at 12:25
Seems related to https://github.com/ReactiveX/rxjs/pull/3218 — cartant, Apr 24 '18 at 12:44

martin · Accepted Answer · 2018-04-24T18:06:45.553

This type of issues where something seems to be broken and that can be magically fixed with using delay(0) or setTimeout usually means that you're expecting RxJS to behave asynchronously all the time while in fact it usually works synchronously unless forced to do otherwise.

And that's exactly your case.

When debounce pushes its value you're on this line https://github.com/ReactiveX/rxjs/blob/5.5.10/src/operators/debounceTime.ts#L100.
Inside subscribe you call next which reaches _next inside debounceTime https://github.com/ReactiveX/rxjs/blob/5.5.10/src/operators/debounceTime.ts#L84 which sets lastValue and hasValue internal variables.
Now it starts going upwards in the call stack and only now it stops processing this line https://github.com/ReactiveX/rxjs/blob/5.5.10/src/operators/debounceTime.ts#L100. At this point it continues and overrides lastValue and hasValue again https://github.com/ReactiveX/rxjs/blob/5.5.10/src/operators/debounceTime.ts#L101-L102. This sets them to null and false.
Then after 300ms debounceTime wants to emit its value but hasValue is null https://github.com/ReactiveX/rxjs/blob/5.5.10/src/operators/debounceTime.ts#L99 because it was already overrided.

Btw, a little more elegant way is using the observeOn operator with an async scheduler that should be more performance efficient then delay(1).

import { async } from 'rxjs/scheduler/async';

var obs = Observable.of(1, 2, 3);
var subject: Subject<number> = new Subject<number>();

subject.pipe(
    tap((a) => console.log("tab:" + a)), 
    debounceTime(300),
    observeOn(async),
).subscribe((a) => {
    console.log(a);
    subject.next(a+1)
});

See you updated demo: https://stackblitz.com/edit/typescript-tsek9s?file=index.ts

Edit: This behavior has probably changed in RxJS 6: https://github.com/ReactiveX/rxjs/pull/3218

epic! thank you so much for the explanation - totally expected async behavior :) — user1859022, Apr 24 '18 at 13:29
This is indeed a seriously epic explanation (comment will self destruct). Nicely done. — msanford, Apr 24 '18 at 15:44

rxjs observable debounceTime inner next ignored

1 Answers1