使用 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);
}
这不是因为of()
.在第一个示例中,每次调用 onChange($event.target.value)
时,您都会创建一个具有自己的debounceTime
和计时器的新链。因此,它永远不会去抖动任何东西,因为每个输入更改都有自己的链。
但是,如果您使用 Subject
(如第二个示例)并通过 this.searchTerm$.next(val)
推送所有事件,那么您只有一个链,其中每个事件都推送在顶部,然后按预期进行去反弹。
考虑你的逻辑。您将为每个更改创建一个最终的观察程序。它不会去抖动,因为观察者已经完成,去抖动是为了防止发射一个,以防另一个观察者来临。因此,它至少需要两个发射才能合理(或更多),如果在回调中创建观察者,则不会发生这种情况。