如何在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()以將其簽出。

我不得不說，我對執行您想要的代碼沒有感覺，但這很可能是我缺乏理解。