Rxjs操作符delay未延迟of发射的每个值，如何实现间隔1秒发一个值

问题原因 #

你编写的代码中，delay操作符是作用于整条数据流的。of创建的Observable会同步一次性发射所有1~8的数值，经过map处理后所有值会被统一延迟1秒后批量输出，因此无法实现每个值间隔1秒发射的效果。

解决方案 #

方案1：使用concatMap实现（兼容所有RxJS版本）

利用concatMap会依次等待前一个内部Observable执行完成的特性，给每个值单独绑定延迟：

of(1, 2, 3, 4, 5, 6, 7, 8)
   .pipe(
      map(val => val + 10),
      concatMap(val => of(val).pipe(delay(1000)))
   )
   .subscribe(console.log);

方案2：使用delayEach实现（RxJS 7.0+ 版本支持）

RxJS 7及以上版本提供了专门的delayEach操作符，可以直接为每个发射值单独设置延迟，写法更简洁：

of(1, 2, 3, 4, 5, 6, 7, 8)
   .pipe(
      map(val => val + 10),
      delayEach(1000)
   )
   .subscribe(console.log);

方案3：使用interval实现（适合固定长度的数值序列场景）

如果是规则的递增序列，也可以直接用interval创建间隔发射的流，再映射为你需要的数值：

interval(1000)
   .pipe(
      take(8), // 控制仅发射8个值后结束流
      map(index => index + 1 + 10)
   )
   .subscribe(console.log);

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri