javascript - 可观察迭代完成事件

Question

我正在订阅一个 BehaviorSubject routes$ 发出一个方向数组

例如['左', 'top', 'left']

然后我想用 200 毫秒的延迟记录这个数组的每个元素，现在在所有元素都被记录之后，我想记录 route finished。

我尝试了完整事件 ()=>{} 和 finally() 运算符，但自从 routes$ 之后它们都没有触发还活着，可能会发出新的方向。

/** Stream recent directions */
this.route$.switchMap(() => {
  return Observable
    .interval(200)
    .timeInterval()
    .take(this.route$.getValue().length)
}).subscribe(
  (v) => {
    if (v.value === this.route$.getValue().length) return;
    let i = v.value;
    this.moveStep(this.route$.getValue()[i]);
  }
);

目前我正在使用这个解决方法

.subscribe(
  (v) => {
    if (v.value === this.route$.getValue().length) return;
    let i = v.value;
    this.moveStep(this.route$.getValue()[i]);

    /** Check if it is the last iteration */
    if(i + 1 === this.route$.getValue().length){
      console.log('route finished');
      this.state = PlayerState.Idle;
    }
  }
);

在 observable 中是否有一种原生的方式来实现这一点？

Answer 1

如果我理解正确的话，你想在传递给 BehaviorSubject 的数组被完全迭代时发出一个值，而你只想获取最后一个值。

尽量避免直接从 Observable 链内部使用 .getValue()，因为 .getValue() 的内容是您应该已经在链中使用的内容.

var routes$ = new BehaviorSubject(['default']);

routes$.switchMap((arr) => {
    return Observable.interval(200)
        .take(arr.length)
        .map(i => arr[i])
        .timeInterval()
        .do(null, null, () => console.log('Complete'));
}).subscribe(value => {
    console.log(value);
});

routes$.next(['left', 'top', 'left']);

setTimeout(() => {
    routes$.next(['top', 'right', 'down']);
}, 1000);

这会打印到控制台:

TimeInterval { value: 'left', interval: 208 }
TimeInterval { value: 'top', interval: 241 }
TimeInterval { value: 'left', interval: 207 }
Complete
TimeInterval { value: 'top', interval: 204 }
TimeInterval { value: 'right', interval: 200 }
TimeInterval { value: 'down', interval: 205 }
Complete

查看现场演示:https://jsbin.com/muxasa/5/edit?js,console

请注意 ['default'] 永远不会重新发出，因为 switchMap() 在调用 routes$.next(['left' , '顶', '左']);