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

Using RxJS event streams for simple sequence management

本文关键字：管理 简单 RxJS 事件 使用      更新时间：2023-09-26

我正在尝试学习如何在事件流中思考，并且我试图通过在某些人为的场景中对其进行测试来解决这个问题。我坚持以下情况：

假设我有两个按钮，我们称它们为 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 控制块做出决策，如下所示：

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");
  }
});

我觉得应该有一种干净、简洁的方法可以做到这一点，没有标志或一些超级混乱的事件流合并，但它逃脱了我。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))

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

看起来像 logA$ = clickA$ .

对于logB$：

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

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

文档链接 ：

  • 平面地图最新
  • RxJS 中的平面映射运算符
相关文章：