javascript - 使用 RxJS 事件流进行简单的序列管理

Question

我正在尝试学习如何在事件流中思考，并且我正在尝试通过在一些人为设计的场景中对其进行测试来全面了解它。我坚持以下方案:

假设我有两个按钮，我们称它们为 A 和 B。 A 可以在任何时候点击。 B 也可以被点击，但前提是 A 之前被点击过。换句话说，B 永远不能被连续点击两次。这是相应的弹珠图(其中 x 表示事件被忽略):

clickA$ --------o--------o-------->
                |        |
clickB$ --o--o--|--o--o--|--o--o-->
          x  x  |  |  x  |  |  x
logA$   --------o--|-----o--|----->
                   |        |       
logB$   -----------o--------o----->

标准方法是将状态存储在标志中并使用 if/else 控制 block 做出决定，如下所示:

var a = document.getElementById('a');
var b = document.getElementById('b');
var flag = false;

a.attachEventListener('click', function(e){
  flag = true;
  console.log("A");
});
b.attachEventListener('click', function(e){
  if (flag) {
    flag = false;
    console.log("B");
  }
});

我觉得应该有一种干净、简洁的方法来做到这一点，而无需标志或一些 super 困惑的事件流合并，但它正在逃避我。 RxJS 中是否有 someMethod() 使得我们可以执行以下操作以获得所需的效果？

var a = document.getElementById('a');
var b = document.getElementById('b');
var a$ = Rx.Observable.fromEvent(a, "click").map(e => "A")
var b$ = Rx.Observable.fromEvent(b, "click").map(e => "B")
           .someMethod(a$)
a$.subscribe(x => console.log(x))
b$.subscribe(x => console.log(x))

Answer 1

我假设 logB$ 是一个热源，就像 clickA$ 一样。

看起来像 logA$ = clickA$。

对于 logB$ :

logB$ = clickA$.flatMapLatest(function (clickA){
          return clickB$.take(1);
        });

flatMapLatest 允许您从 clickA$ 中获取一个值，并将其关联到一个流，此处为 clickB$.take(1) . flatMapLatest 将因此从该流发出值直到它完成，它将在从 clickB$ 发出第一个发出的值之后完成(因为 take(1) )。当来自 clickA$ 的新值到达时，取消订阅从先前值派生的先前可观察对象，并订阅从新值派生的可观察对象。这给了你预期的行为。

文档链接:

• flatMapLatest
• flatMap operators in RxJS