RxJS：在 X 次排放后更改油门时间

Question

我正在构建一个 RxJS 幻灯片，如果用户按住右箭头键，我想每 500 毫秒导航到下一个图块。我使用throttleTime如下：

const forwardNavigation$ = fromEvent(document, 'keydown').pipe(
    filter(event => event.keyCode === KEY_CODE.arrowRight),
    throttleTime(500)
);

我现在想要做的是在导航到第 5 个磁贴后不释放箭头键将油门时间减少到 100 毫秒。

这是可能的，人们将如何实施它？

Answer 1

如果您想要一种仅使用 Observables 的更具声明性的方法，以下内容也将起作用：

const source$ = fromEvent(document, 'keydown').pipe(
  filter((event: KeyboardEvent) => event.code === "ArrowRight")
);
const slow$ = source$.pipe(throttleTime(500), take(5));
const fast$ = source$.pipe(throttleTime(100));

const forwardNavigation$ = concat(slow$, fast$);
// subscribe to forwardNavigation$ and execute navigation code

它的作用是根据键盘事件创建两个具有不同throttleTimes 的Observables。然后它用于concat合并两者的结果，这将忽略第二个，直到第一个完成。添加take(5)到第一个 observable 意味着它在 5 次发射后完成，此时fast$Observable 接管。

工作StackBlitz。