为什么 rxjs debounceTime 不适用于使用 'of' 运算符创建的可观察对象?
Why rxjs debounceTime does not work on observables created using 'of' operator?
使用 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);
}
考虑一下你的逻辑。您将为每个 onChanges 创建一个最终的观察者。它不会去抖动,因为观察者已经完成,并且去抖动是为了防止发出一个,以防另一个出现。因此它至少需要 两个 发射是合理的(或更多),如果在回调中创建观察者,则不会发生这种情况。
这不是因为 of()
。在您的第一个示例中,每次调用 onChange($event.target.value)
时,您都会创建一个具有自己的 debounceTime
和自己的计时器的新链。所以它永远不会去抖动任何东西,因为每个输入变化都有自己的链。
但是,如果您使用 Subject
(就像在您的第二个示例中一样)并通过 this.searchTerm$.next(val)
推送所有事件,那么您只有一个链,其中每个事件都被推送到顶部,然后作为你期待。
使用 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);
}
考虑一下你的逻辑。您将为每个 onChanges 创建一个最终的观察者。它不会去抖动,因为观察者已经完成,并且去抖动是为了防止发出一个,以防另一个出现。因此它至少需要 两个 发射是合理的(或更多),如果在回调中创建观察者,则不会发生这种情况。
这不是因为 of()
。在您的第一个示例中,每次调用 onChange($event.target.value)
时,您都会创建一个具有自己的 debounceTime
和自己的计时器的新链。所以它永远不会去抖动任何东西,因为每个输入变化都有自己的链。
但是,如果您使用 Subject
(就像在您的第二个示例中一样)并通过 this.searchTerm$.next(val)
推送所有事件,那么您只有一个链,其中每个事件都被推送到顶部,然后作为你期待。