CODEWITHSUNDEEP
angularrxjsrxjs6debouncing
kmansoor
kmansoor

Reputation: 4345

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);
}

Upvotes: 7

Views: 6433

Answers (2)

martin
martin

Reputation: 96891

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.

Upvotes: 13

Nuno Sousa
Nuno Sousa

Reputation: 882

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.

Upvotes: 4

Related Questions