Javascript 如何为同一控件上的不同事件实现不同的去BounceTime？

我有一个从FormBuilder生成的控件。 我想为每个按键设置一个去BounceTime，但不能在用户失去控件焦点时设置

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

}

因此，第一个控制台日志为true，而带有setTimeout的日志为false

keyup将解盎司时间设置为1000是有意义的，因此它可以防止对后端服务的多次调用，但在发生lostFocus事件时就没有意义了

我可能遗漏了什么，但是

---

如何为同一控件上的不同事件实现不同的去BounceTime？

理想情况下，您需要区分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.\u control.valueChanges

一个负责keyup，另一个负责focuslost

谢谢您的提问

我认为您可以使用不同的数据流简化组件的结构。对我来说，把可观测数据看作是流更容易

基本思想是分割事件流。在这种情况下，您将减少代码的耦合。如果这样做，您将能够在将来轻松地切换实现

在这里，您可以找到使用实现的方法

private lostFocusObject=new Subject（）；
private-keyusubject=新主题（）；
private onDestroySubject=新主题（）；
keyUp$=this.keyusubject.asObservable（）.pipe（takeUntil（this.onDestroySubject））；
lostFocus$=this.lostFocusObject.asObservable（）.pipe（takeUntil（this.onDestroySubject））；
请求$=此.keyUp$.pipe(
去BounceTime（500），
switchMap（（）=>this.getEmulatedRequest（）），
takeUntil（本.onDestroySubject）
)
恩戈尼尼特（）{
this.request$.subscribe（（）=>console.log（'request was processed'）；
this.keyUp$.subscribe（（）=>console.log（'keyUp已处理'）；
this.lostFocus$.subscribe（（）=>console.log（'lostFocus已处理'）；
}
恩贡德斯特罗（）{
this.onDestroySubject.next（）；
}
onLostFocus（）{
this.lostFocusObject.next（）；
}
onKeyUp（）{
this.keyusubject.next（）；
}
私有getEmulatedRequest（）：可观察{
返回计时器（1000）；
}

再次感谢你的提问

---

我在等待你的反馈。祝您在演示中好运。

不相关，但是

takeUntil（this.ngUnsubscribe）

应该始终是最后一个操作员，这是一个很好的做法@Reactgular无关，但谢谢你的建议！你说的“失焦”和其他事件的去焦时间是什么意思？您正在订阅此内容。_control.valueChanges，lostFocus是如何关联的？@GogaKoreli由于debounceTime，事件“onInputChange”也会延迟，因此值需要一些时间才能反映出来，我将更新代码，希望您能理解我的意思。我想总结一下这个问题。您想订阅不同的事件并用不同的逻辑处理这些事件吗？例如，

onKeyup

将发送请求，

onInputChange

将记录一些内容。我说的对吗？对于包含takeUnit的管道，我得到了一个

属性'pipe'在类型'OperatorFunction'上不存在。

我通过阅读它来理解您的示例，但从技术上讲我从来没有这样做过，所以我不知道为什么会出现这个错误，而不是操作符，导入静态合并，即：

从'rxjs'导入{merge}这看起来很有希望，谢谢你的解释，我也会尝试一下，然后给你反馈。