Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why rxjs debounceTime does not work on observables created using 'of' operator?

Using angular 7 and rxjs 6:

<input (input)="onChange($event.target.value)">

Why the following does not debounce?

onChange(val: string) {
  of(val)
    .pipe(        
      debounceTime(300)        
  ).subscribe(valx => {
    console.log(valx);
  });
}

But this does:

  searchTerm$: Subject<string> = new Subject();

  this.searchTerm$.pipe(      
    debounceTime(300),    
  ).subscribe(val => {
   console.log(val);
  });


onChange(val: string) {   
  this.searchTerm$.next(val);
}
like image 378
kmansoor Avatar asked Dec 24 '22 01:12

kmansoor


2 Answers

This isn't because of of(). In your first example every time you call onChange($event.target.value) you're creating a new chain with its own debounceTime and its own timer. So it never debounces anything because every input change has its own chain.

However, if you use Subject (like in your second example) and push all events through this.searchTerm$.next(val) then you have just one chain where each event is pushed at the top and then debounced as you expect.

like image 162
martin Avatar answered May 04 '23 23:05

martin


Consider your logic. You will create a finalised observer for each onChanges. It doesn't debounce because the observer is already finalized, and debounce is to prevent emitting one, in the off-chance that another one comes. So it needs at least two emitions to be justifiable (or more ), and that can't happen if the observer is created in the callback.

like image 32
Nuno Sousa Avatar answered May 05 '23 01:05

Nuno Sousa