一定时间后重置扫描累加器RxJS

问题描述

我有一个fromEvent附加到输入keydown事件。这样我就可以收听KeyEvent。

在管道内部，我使用了扫描运算符，因此我可以累积用户引入的最新3个键。

我检查了扫描器的累加器长度，所以如果已经是三个，就清理一下（手动重置）。

我需要一种方法，当用户在接下来的3000毫秒内键入内容时，他可以继续键入直到达到限制（3个键），但是如果用户的时间比时间限制（3秒）慢，则下次键入时，我将手动重置累加器。

  fromEvent(myInput.nativeElement,'keydown').pipe(
    tap(e => e.preventDefault()),scan((acc: KeyboardEvent[],val: KeyboardEvent) => {
      // Add condition here to manually reset the accumulator...
      if (acc.length === 3) {
        acc = [];
      }
      return [...acc,val];
    },[]),takeuntil(this.destroy$)
  ).subscribe((events: KeyboardEvent[]) => console.log(events));

我尝试将其与计时器合并，但是我不知道如何合并。不确定如何到达那里。

解决方法

您可以在此处使用timeInterval运算符，该运算符为您提供两次发射之间的时间以及值。设置如下：

  fromEvent(myInput.nativeElement,'keydown').pipe(
    tap(e => e.preventDefault()),timeInterval(),// just add this operator,will convert to shape {value: T,interval: number}
    scan((acc: KeyboardEvent[],val) => {
      // Add condition here to manually reset the accumulator...
      // also check the interval
      if (acc.length === 3 || val.interval > 3000) {
        acc = [];
      }
      return [...acc,val.value];
    },[]),takeUntil(this.destroy$)
   ).subscribe((events: KeyboardEvent[]) => console.log(events));

这是一个有效的闪电战：https://stackblitz.com/edit/rxjs-dxfb37?file=index.ts

不是以前有过用例的运算符，但似乎可以非常有效地解决您的问题。