使用 RxJS 每 350 毫秒触发一次队列事件

Question

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

所需弹珠图：

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

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

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

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

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

我想将事件的输出限制在 350 毫秒，但我不想使用 throttle 运算符，因为我不想丢失任何事件（我想要 a， b，c 开火）。

A 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() 运算符是多余的。已删除。

使用 RxJS 每 350 毫秒触发一次队列事件

Queue events to fire every 350ms with RxJS

javascript

rxjs

reactivex