一次只运行一个管道

【问题标题】：Run only one pipe at a time一次只运行一个管道
【发布时间】：2020-01-04 14:43:46
【问题描述】：

我正在尝试使用多种方法进行服务 - 每个方法都将返回管道。一次只能调用一个方法；否则，应该发生管道的切换。

这是我如何实现它的一个例子——https://stackblitz.com/edit/rxjs-3pry8u?devtoolsheight=60。它看起来太复杂并且有潜在的内存泄漏，但它确实有效。如果你尝试快速点击“Make red”/“Make green”/“Make blue”按钮，只会触发最后一个（参见 console.log）。

根据要求 - 控制管道在 Color 内部运行很重要，而不是在外部运行。我可以想象如何通过外部方式解决它：我可以将所有点击事件合并到一个管道并使用 switchMap()。但对我来说很有趣 - 如何在 Color 类中正确解决这个问题。

【问题讨论】：

标签： rxjs rxjs6

【解决方案1】：

这就是我设法在Color 类中解决它的方法：

我没有使用switchMap，因为我不会使用内部可观察对象。我也确实摆脱了makeRed、makeGreen 和makeBlue 函数。
我合并了所有事件并将debounceTime 应用到它们。

Color
 .mergeEvents (events: Observable<any>[]) {
    merge<State>(...events)
    .pipe(
      debounceTime(500),
    )
    .subscribe(c => {
      console.log(c)
      this.state$.next(c);
    })
  }

const color = new Color();

color.mergeEvents([
  fromEvent(document.getElementById("make-red"), "click").pipe(mapTo({ color: 'red' })),
  fromEvent(document.getElementById("make-green"), "click").pipe(mapTo({ color: 'green' })),
  fromEvent(document.getElementById("make-blue"), "click").pipe(mapTo({ color: 'blue' })),
]);

Here is a StackBlitz demo.

【讨论】：