RxJs 6 DebounceTime 运算符无法正常工作答案

【问题标题】：RxJs 6 DebounceTime operator not working properlyRxJs 6 DebounceTime 运算符无法正常工作
【发布时间】：2019-05-16 07:49:38
【问题描述】：

我有这个请求，我想每隔一秒去抖动一次：

this.service.doStuff(data)
            .pipe(
                debounceTime(1000),
                distinctUntilChanged()
            )
            .subscribe(data => {
               foo();
            }, () => {
                console.error("server error");
            });

DoStuff 函数：

public doStuff(data: any){
        return this.http.post(streetSearch, data).pipe(
            map(res => res.json()));
    }

此代码从input 的事件(keyup) 执行。问题是，每当我释放一个键时，就会调用一个呼叫。显然这不是我想要的。

我想要实现的是仅在至少一秒钟内没有按键时才执行 httpCall（这就是去抖动的原因）。

我错过了什么？

【问题讨论】：

您想要的预期行为是什么？
你的http请求放在哪里？与我们分享 doStuff() 函数可能是个好主意。
按预期为我工作：stackblitz.com/edit/rxjs-rambrw
@enno.void 谢谢你的例子，但我不想使用这种方法（如果可能的话）。在以前版本的 rxJs 中，我这样做没有问题。但现在不起作用，我不知道为什么。
@ngfelixl 不知道你为什么需要它，但我已经在问题中添加了它

标签： angular rxjs

【解决方案1】：

这段代码是从输入的事件（keyup）中执行的

表示每次按下一个键，就会运行这段代码。

这意味着您对每个键进行 HTTP 调用，这与您当前的行为一致：HTTP 调用不是热可观察对象，因此除非您将它们转换为一个，否则您将无法对其使用 debounceTime .

您应该做的是听取输入的值变化。

myFormControl.valueChanges.pipe(
  debounceTime(1000),
  switchMap(value => this.service.doStuff(value)),
  distinctUntilChanged(),
).subscribe(...);

【讨论】：

我认为debounceTime 需要在switchMap 之前。
不确定，但由于我还没有测试过，我会听你的@fridoo！
感谢@trichetriche，它对我帮助很大。我已经解决了使用 fromEvent 而不是 formControl 。