RxJs 6 DebounceTime操作符不能正常工作

Question

我有一个请求，我想每一秒都要揭穿：

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

此代码是从一个(keyup)的事件input执行的。问题是，每当我释放一个密钥时，就会接到一个电话。显然这不是我想要的。

我试图实现的是，只有在没有按下键的情况下(至少有一秒钟)才执行httpCall (这就是为什么退出)。

我遗漏了什么？

Answer 1

此代码是从输入的事件(keyup)执行的。

意味着每次按一个键，就会运行这段代码。

这意味着您对每个键进行HTTP调用，这与您当前的行为是一致的: HTTP调用不是热门可观察的，所以除非您将它们转换为一个键，否则您将无法在其上使用debounceTime。

你应该做的是倾听输入的价值变化。

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