javascript - 使用 RxJS 将事件排队，每 350 毫秒触发一次

Question

我有一个导致动画播放的键盘事件。用户可能会产生比动画播放速率更多的事件，因此我想创建一个队列，该队列最终会在一定的延迟后一个接一个地清空。

所需的大理石图:

=================================================

user:    START|a-b-c-----------------------------

result:  START|-350ms--a--350ms--b--350ms--c-----

=================================================

用户快速触发 3 个事件 (a b c)。事件 a 触发后，350ms 计时器启动。该计时器结束后，result 会触发 a 并启动另一个 350 毫秒计时器。计时器完成后，它会触发 b。基本上，如果计时器正在进行中，我想将其添加到队列中并稍后发出。速率不能超过 350 毫秒，我想要每个事件。

我想将事件的输出限制为 350 毫秒，但我不想使用 throttle 运算符，因为我不想丢失任何事件(我想要 a、b 和 c 来触发)。

首选 Javascript RxJS 解决方案，但我会接受任何语言的 Rx 运算符的任何答案。

Answer 1

这似乎可以解决问题:

import { fromEvent, concat, timer } from 'rxjs';
import { tap, concatMap, filter } from 'rxjs/operators';

fromEvent(document, 'keypress')
.pipe(
  filter((e: KeyboardEvent) => e.code === 'Space'),
  concatMap(() => timer(350))
).subscribe(console.log)

Blitz

<小时/>

编辑:concat() 运算符是多余的。已删除。