javascript - 创建一个 RXJS 中断定时器

Question

现在我有一个用流的值更新的显示变量。 super 简单:

display$
    .distinctUntilChange()
    .subscribe((val) => this.display = val);

我还有一个“中断”消息功能，可以将 this.display 更改为传入的值 2 秒，然后使用 setTimeout 将其还原。我想更改此部分以使用流。因此，每当我的中断 $ 流中出现一个值时，它会更改显示值 2 秒，然后返回显示 $ 上的最新消息。

我尝试绘制图表:

display$    --A-----C----------->
interrupt$  ----B----D-|----|--->
final       --A-B----D------C--->

我在中断流上有两个“结束”标记，用于尝试指示计时器何时启动，将其恢复为显示$。当前非 rx 代码在 D 进来时立即取消 B 计时器。

Answer 1

// mock streams
const [display$, interrupt$] = [].slice.call(document.querySelectorAll('button'))
  .map((b, i) =>
    Rx.Observable.fromEvent(b, 'click')
    .map((e, idx) => `${i === 0 ? 'DISPLAY' : 'INTERRUPT'}-${idx}`)
  )

Rx.Observable.combineLatest(
    display$,
    interrupt$.startWith(null)
    .switchMap(v => Rx.Observable.of(v)
      .merge(Rx.Observable.of(null).delay(2000))
    )
  )
  .map(([d, i]) => i || d)
  .distinctUntilChanged()
  .do(x => console.log(x))
  .subscribe()

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

<button>display</button>
<button>interrupt</button>