javascript - 如何为同一控件上的不同事件实现不同的 debounceTime？

Question

我有一个从 FormBuilder 构建的控件。我想为每个 keyup 设置一个 debounceTime，但不是在用户失去控件焦点时设置。

this._control.valueChanges
    .pipe(
      takeUntil(this.ngUnsubscribe),
      debounceTime(1000),
      distinctUntilChanged()
    )
    .subscribe((value) => {
      // Logic goes here
    });

-------------------------------
onInputChange(event: any): void {

  console.log(this.autoComplete.focus, "1"); // Return true

  setTimeout(() => console.log(this.autoComplete.focus, "2")); // return false

}

所以第一个console log是true，setTimeout的是false

keyup 的去抖时间为 1000 是有意义的，因此它可以防止对后端服务的多次调用，但在 lostFocus 事件的情况下这没有意义。

我可能在这里遗漏了一些东西但是

如何对同一个控件的不同事件实现不同的debounceTime？

Answer 1

理想情况下，您需要区分 lostFocus 和 input keyup。

这是您修改后的示例:

merge(
  this._control.valueChanges.pipe(
    filter(() => this.autoComplete.focus === true),
    debounceTime(1000),
    distinctUntilChanged(),
  ),
  this._control.valueChanges.pipe(
    filter(() => this.autoComplete.focus === false),
    distinctUntilChanged(),
  ),
)
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe((value) => {
    // Logic goes here
  });

这样你就合并了两个版本的this._control.valueChanges，一个负责keyup，另一个负责focuslost