Почему rxjs debounceTime не работает с наблюдаемыми объектами, созданными с помощью оператора 'of'?

Question

С помощью angular 7 а также rxjs 6:

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

Почему следующее не разоблачает?

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

Но это делает:

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

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


onChange(val: string) {   
  this.searchTerm$.next(val);
}

Answer 1

Это не из-за of(), В вашем первом примере каждый раз, когда вы звоните onChange($event.target.value) вы создаете новую цепочку со своей собственной debounceTime и это собственный таймер. Так что он никогда ничего не отменяет, потому что каждое изменение ввода имеет свою собственную цепочку.

Однако, если вы используете Subject (как во втором примере) и проталкиваете все события через this.searchTerm$.next(val) тогда у вас есть только одна цепочка, где каждое событие выдвигается вверх, а затем дебатируется, как вы ожидаете.

Answer 2

Примите во внимание вашу логику. Вы создадите финального наблюдателя для каждого onChanges. Он не дебютирует, потому что наблюдатель уже завершен, и дебагинг состоит в том, чтобы предотвратить испускание одного из них в случае, если другой придет. Таким образом, для оправдания (или более) необходимы как минимум два выброса, а этого не произойдет, если в обратном вызове будет создан наблюдатель.