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

Question

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

Answer 1

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.

Answer 2

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.