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

此代码从输入的事件（键）执行

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

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

您应该做的是监听输入值的更改。

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

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

1 个答案: