使用 RXJS 延迟每个元素

Question

我正在使用 RxViz 来模拟每 1 秒出现一次的不同动作。当我尝试

Rx.Observable.create(obs => {
  obs.next([1, 2, 3]); // or could be ['aaa', 'bbbb', 'ccc']
  obs.complete();
}).delay(1000);

在https://rxviz.com

或者我自己使用 console.log

它一直同时显示三个数字 1, 2, 3

有一篇关于同样问题的帖子，但没有一个答案对我有用。我正在使用 Rx 最新版本 6

如何创建一个延迟的可观察对象

[编辑] 数组可以包含任何东西，如数字、字符串或任何对象

Answer 1

如果您想延迟每个值（例如延迟 1 秒），您可以执行以下操作：

 Rx.Observable.create(obs => {
      obs.next([1, 2, 3]);
      obs.complete();
    })
      .pipe(
        // make observable to emit each element of the array (not the whole array)
        mergeMap((x: [any]) => from(x)),
        // delay each element by 1 sec
        concatMap(x => of(x).pipe(delay(1000)))
      )
      .subscribe(x => console.log(x));
  }

这里我没有修改你创建的 observable 的内部结构。相反，我只是采用您的 observable 并应用适当的操作来实现您的期望。

Answer 2

这是我的解决方案（非常干净）

const fakeData = [1,2,3]

loadData$() {
    return from(fakeData).pipe(
      concatMap(item => of(item).pipe(
        delay(1000)
      )),
    );
  }