Question

我正在创建一个包含多种表单的页面，我想检测每个表单上的鼠标按下，集中和模糊事件。

在大多数情况下，它们会同时发出（例如，单击一种形式而已选择另一种形式，则会发出“模糊”和“鼠标按下”）。目标是仅处理其中之一。

我创建了一个名为“ interactions $”的Observable，它发出的值是“事件”对象，例如鼠标按下，焦点或模糊事件。

我正在该Observable上使用管道，现在我为操作员提供了两种选择：

debounceTime（100），以便仅处理最后一个
throttleTime（100），以便仅处理其中的第一个。

<main></main>

理想情况下，我希望在模糊事件上同时处理mousedown和focus事件，但是问题是，在$ interactions $发出时：

在“模糊”之前发出“ mousedown”
在“模糊”之后发出“焦点”

所以，我的问题是：

是否有任何方法可以根据源值应用debounceTime（）或节流时间（）？

编辑：

此互动$是一个主题，其值正在此事件处理程序上发出：

      this.interaction$
         .pipe(
            debounceTime(100),
            tap(evt => console.log('processing event' + evt))
         )
         .subscribe();

其中FormFieldInteraction只是一个具有2个字符串属性的类。

编辑2：

基本上我想要这样，但是我不确定是否有任何rxjs运算符：

onFieldInteract(field: string, evt: Event) {
    this.interaction$.next(new FormFieldInteraction(field, evt.type));
}

Answer 1

我认为我们需要更好地考虑我们的问题。我认为这不只是一个简单的运算符，而且这个问题需要更好的方法。

我分开了两种情况，一种情况是您收到模糊和剩余事件。

请注意blur$，因为this.interaction$首先会被去抖动，然后过滤后的总体结果是，您总是会以这种方式获得正确的模糊事件。
对于remaining$，这里还有除模糊之外的其余事件，您希望它们受到限制。

最后，我们将两者合并在一起，以实现您的预期行为。

看看更新的示例：

const blur$ = this.interaction$.pipe(
  debounceTime(100),
  filter((event) => event.type === 'blur'),
);

const remaining$ = this.interaction$.pipe(
  filter((event) => event.type !== 'blur'),
  throttleTime(100),
);

merge(blur$, remaining$)
  .pipe(tap((evt) => this.fieldInteract.emit(evt)))
  .subscribe();

您正在寻找这种行为吗？告诉我，我会根据您的实际需求修改答案。

如何根据源值应用rxjs运算符？

1 个答案: