javascript - 如何在 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);

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

这可能就是您想要的:

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