ZipWithLatestForm*所需操作员*或解决方案

您可以在最晚使用

import { of, fromEvent, interval } from 'rxjs'; 
import { map, withLatestFrom } from 'rxjs/operators';

const input$ = fromEvent(document, 'keydown').pipe( map((event: KeyboardEvent) => event.keyCode));
const timer$ = interval(1000);
const source$ = timer$.pipe(withLatestFrom(input$));

source$.subscribe(x => console.log(x));

在StackBlitz上试用此实况演示-> https://stackblitz.com/edit/rxjs-bmx7hg

只要您聚焦页面并按下某个键,流就会启动,并且您将在每个刻度上获得一个发射值,无论您是否单击了上一个刻度之后的按钮。

我不太了解RXJS,不能说是否有一个内置组件已经做到了这一点,但是您应该能够用一个显式队列来处理它:

import { of, fromEvent, interval } from 'rxjs'; 
import { map, withLatestFrom } from 'rxjs/operators';

const queue = [];
const input$ = fromEvent(document, 'keydown').pipe(map((event: KeyboardEvent) => {
    queue.push(event.keyCode);
    return queue;
});
const timer$ = interval(1000);
const source$ = timer$.pipe(withLatestFrom(input$), map(([tick, queue]) => {
    if (queue.length > 1)
        return queue.shift();
    else
        return queue[0];
}));

source$.subscribe(console.log);

经过一段时间的思考,我想出了这样的解决方案, StackBlitz Edit Link :

const interval$ = interval(500).pipe(share());
const input$ = fromEvent(document, 'keydown')
  .pipe(
    map((event: KeyboardEvent) => event.keyCode),
    concatMap(key => interval$.pipe(map(tick => key), take(1))),
  );

const source$ = interval$.pipe(withLatestFrom(input$))
source$.subscribe(x => console.log(x));

我在interval$和concatmap(注意事项(1))的帮助下延迟了input$的输入。

concatmap帮助我延长input$events并等待interval事件触发它自己的事件。使用withlatestform帮助我将tick与它们自己的输入$values匹配起来。