javascript - 使用 Rxjs 并行调用同时延迟的请求 block ？

Question

我有一个任务队列(长度为 20)，其中每个任务都是一个要调用的 ajax 请求。

我想:

1) 创建 5 个 block ( 20/5 =4 个 block )
2) 执行每个 block ，其中每个 block 中的项目 将以 1000 毫秒的延迟执行。
3) 当每个 block 项目完成时，等待 3 秒。

所以:

1.._1sec(↦绿)..2.._1sec(↦绿)..3.._1sec(↦绿)..4.._{1sec( ↦ green)}..5......................_3sec..........
6.._{1sec( ↦ 绿色)}..7.._{1sec( ↦ 绿色)}..8.._{1sec( ↦ 绿色)}。 .9.._{1sec( ↦ 绿色)}..10.._3sec.. ………… ... 11.._{1sec( ↦ 绿色)}..12.._{1sec( ↦ 绿色)}..13.._{1sec( ↦ 绿色)}。 .14.._{1sec( ↦ 绿色)}..15........ _3sec.. .........
16.._{1sec( ↦ 绿色)}..17.._{1sec( ↦ 绿色)}..18.._{1sec( ↦ 绿色)}。 .19.._{1sec( ↦ 绿色)}..20

我确实设法做了一些接近的事情:

与:

from(this.httpCodes)
      .pipe(bufferCount(5),
       concatMap((i, y) => from(i).pipe(mergeMap(f => {
                                    this.httpCodes[f.index].wasExecuted = true;
                                     return this.ajaxAlike(f.data).pipe(
                                                               catchError(() => { return of(-1) }),
                                                               map((r) => ({ res: r, data: f }))
                                                                      )
                                                      }) 
                                        ,delay(3000) )),

      )

但它没有按照我的预期执行。我没有看到 block 中每个项目之间的延迟

问题:

为什么我看到这么多请求，以及如何更改我的代码，以便 block 中的每个项目将以 1 秒的延迟执行(绿色应该在每一秒后出现)，并且 - 在每个 block 之后，等待3 秒？

Online Demo

Answer 1

delay 运算符延迟发出的项目。似乎您希望它发射该元素，然后在发射下一个元素之前“休眠” 3 秒。为此，您可以连接一个空的延迟可观察对象。

您可以创建以下pipeable sleep 运算符:

const sleep = ms => concat(Rx.Observable.empty().pipe(delay(ms)))

并按如下方式使用它:

const {concatMap, concat, delay, bufferCount} = Rx.operators;

const sleep = ms => concat(Rx.Observable.empty().pipe(delay(ms)));

const ajaxAlike = call => Rx.Observable.of(call).pipe(delay(500));

Rx.Observable.range(0, 20).pipe(
  bufferCount(5),
  concatMap(calls => 
    Rx.Observable.from(calls).pipe(
      concatMap(call => ajaxAlike(call).pipe(sleep(1000))),
      sleep(3000)
    )
  )
)
.subscribe(console.log)

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