rxjs:如何通过Observables

时间:2017-11-17 12:50:29

标签: rxjs

enter image description here

我正在使用Angular中的回合制游戏,通过socket.io实现与后端进行通信。在我的组件中,我正在从服务器监听几种类型的通信,每个通信都提供有关如何更新我的视图以反映服务器中数据的当前状态的信息。

现在,更新会立即应用于组件的数据。但是,我更愿意在每次更新之间进行一些延迟,以便用户有时间查看每次更新的效果。

(请参阅我的图片顶部,基本上我正在尝试做什么)

我相信我会通过subscribeOn运算符实现这一点,但不确定如何指定我的'interval'n。

const example = Rx.Observable
  .create(observer => {
    observer.next(0);
    observer.next(1);
    observer.next(2);
    setTimeout(() => {
      observer.next(3);
      observer.next(4);
      observer.complete();
    }, 2500);
  });

const source = example
  .subscribeOn(Scheduler.timeout);

source.subscribe(console.log);

1 个答案:

答案 0 :(得分:2)

使用 concatMap 运算符,如下所示:

const nInterval = 500;

const example$ = Rx.Observable.from([0, 1, 2])
  .concat(Rx.Observable.from([3,4]).delay(2500));

const source$ = example$
  .concatMap(item => 
    Rx.Observable.of(item)
      .concat(
         Rx.Observable.of('ignored')
           .delay(nInterval)
           .ignoreElements()
      )
  );

source$.subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>