如何在rxjs中撰写可观察序列

Question

我正在使用rxjs处理一些复杂的鼠标手势。

这些危险之一是在拖动操作期间多次“摇动”鼠标（从左到右，从右到左等）。

因为我不知道用户是通过向左还是向右移动来开始，所以我正在使用“ race（）”来接受先开始的那个。

我的问题是，当第一个“摇动”观察者完成时，第二个已经完成。

我在jsbin（ http://jsbin.com/wuzodog/3/edit?html,js,output ）上做了一个简化的示例。

（在此简化示例中，我将负数用作“鼠标左键”，将正数用作“鼠标右键”。）

问题的核心在这里展示...

  const subMouseMove = new Rx.Subject<number>();

  const obLeft = subMouseMove.filter(m => m < 0);
  const obRight = subMouseMove.filter(m => m >= 0);

  const get_obLeftUntilRight = () => obLeft.takeUntil(obRight);
  const get_obRightUntilLeft = () => obRight.takeUntil(obLeft);

  const get_obShake = () => Rx.Observable.race(get_obLeftUntilRight(), get_obRightUntilLeft()); 

  const obDragShakeAndDrop = Rx.Observable.concat(
    get_obShake(),
    get_obShake(),
  );

  //sending the following values to subMouseMove 
  [-1, -2, 3, 4, -5].forEach((v, i, a) => setTimeout(() => subMouseMove.next(v), i * 10));

问题是get_obShake（）的两个实例都在同一时间完成。

我从jsbin得到的结果是：

我希望我的结果是：

当我修改示例（ http://jsbin.com/wuzodog/4/edit?html,js,output ）时，绕过“ race（）”直接调用“左摇/右摇”和“右摇/左摇” ”，我得到了“预期”输出。

谁能解释为什么在第一个示例中早就完成了第二次握手？

Answer 1

这很棘手，但是答案比您想象的更合理。 问题是， Race还接受完成作为第一个获胜的《 Observable》。

const get_obLeftUntilRight = () => obLeft.takeUntil(obRight);
const get_obRightUntilLeft = () => obRight.takeUntil(obLeft);

当我们查看这两个Observable时，如果发生“ left”事件，则第一个将发出，第二个将立即完成。 如果我们得到一个“正确的”事件，则第一个将立即完成 ，第二个将...

这可能是您想要的：

const get_obLeftUntilRight = () => obLeft.take(1).concat(obLeft.takeUntil(obRight));
const get_obRightUntilLeft = () => obRight.take(1).concat(obRight.takeUntil(obLeft));

Answer 2

两个jsBin输出之间的区别在于

** NEXT: get_obShake2 = 4

一开始就缺少了，因为race已经消除了它。

因此，第二轮摇动并不是尽早完成，只是一个较短的过程。

添加一些timestamp()以将其签出。

我不得不说，我对执行您想要的代码没有感觉，但这很可能是我缺乏理解。