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

Question

我有一个fromEvent附加到输入keydown事件。通过这种方式，我可以收听KeyEvents。

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

我检查了扫描，累加器的长度，所以如果已经是三，我会清理它(手动重置(。

我需要一种方法，当用户在接下来的3000ms内输入时，他可以一直输入，直到达到极限(3个键(，但如果用户比时间限制(3s(慢，下次他输入时，我将手动重置累加器。

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));

我试着以某种方式将其与计时器合并，但我不知道如何合并。不知道怎么去那里。

Answer 1

您可以在此处使用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

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