javascript - 如何使用 rxjs 过滤按键？

Question

我需要在不重复的情况下获得干净的 keydown/keyup 事件。当您按下一个键时，会发生 keydown 事件，当您释放时 - keyup。没有困惑的重复按键。

代码如下:

var keyDowns = rx.Observable.fromEvent(document, 'keydown');
var keyUps = rx.Observable.fromEvent(document, 'keyup'); 
var keyActions = rx.Observable.merge(keyDowns, keyUps);

keyActions.subscribe(function(e) {
    console.log e
});

如何调整它来完成这项工作？

Answer 1

虽然它很好用，但 icio 的状态跟踪解决方案是 ** 非常 ** 单一。适当的 RxJs 5解决方案是:

var keyDowns = Rx.Observable.fromEvent(document, "keydown")
var keyUps = Rx.Observable.fromEvent(document, "keyup")

var keyPresses = keyDowns
  .merge(keyUps)
  .groupBy(e => e.keyCode)
  .map(group => group.distinctUntilChanged(null, e => e.type))
  .mergeAll()

解释:

• 合并所有键的所有 keydown 和 keyup 事件。
• 按键 (keyCode) 将它们分组。它创建一个可观察对象的可观察对象，其中每个子可观察对象将包含一个键的所有事件。
• 将每个子可观察对象映射到其自身的 distinctUntilChanged 版本。按事件类型执行此操作，以便跳过额外的按键。
• 将所有键合并回一个 observable