javascript - 如何在 RxJS 中创建切换流？

Question

我想创建一个基于 keyup 和 keydown 切换的 Steam。键代码在 keydown 事件上发出一次，并在 keyup 事件上再次发出。我使用 distinctUntilChanged 来防止在 keydown 触发时发送多个键代码。我的代码的问题是，由于 distinctUntilChanged，我无法对同一键代码执行连续的 keydown 和 keyup。

目前，按下并释放“a”后紧接着“b”有效，但按下并释放“a”后紧跟“a”则无效。

要求

我想要实现的是:

• 当按键按下时，执行一些任务
• 当 key 抬起时，停止执行该任务
• 多个按键可以向下或向上(因此不能使用 keypress 事件)
• 不同的操作与不同的键相关联(认为“a”代表操作 1，“b”代表操作 2)

代码

var getKeyCode = function(e) { return e.which; }
var target = document.querySelector('body');

var keyDownStream = Rx.Observable.fromEvent(target, 'keydown')
    .distinctUntilChanged(getKeyCode);

var keyUpStream = Rx.Observable.fromEvent(target, 'keyup')
    .distinctUntilChanged(getKeyCode);

var toggleStream = Rx.Observable.merge(keyDownStream, keyUpStream);

toggleStream.subscribe(function(e) {
    console.log(e.which);
});

Answer 1

我用过:

var toggleStream = Rx.Observable.fromEvent(document.body, 'keydown').filter(function ( e, index ) {
  return index < 1;
}).takeUntil(Rx.Observable.fromEvent(document.body, 'keyup')).repeat();

toggleStream.subscribe(function ( e ) {
 // the task should go here 
 console.log("key down :" + e.which);
});

你可以在这里找到一个jsbin:http://jsbin.com/xuqasawese/edit?html,js,console,output

目前，按下并释放“a”，然后再按下“b”，以及按下并释放“a”，然后再按下“a”。然而，您可以想象一下，您按下了“a”键，并且在不释放该键的情况下，按下了另一个“b”键，然后释放了“b”。然后按另一个键“c”，您的操作将被执行。这是一种极端情况，但是如果发生这种情况，您是否有任何预期的行为？