javascript - RxJS:使用定时间隔对大数组进行分块并将其用于渲染

Question

有一个大数组，比如长度为 100。每个数组包含一个包含 50 多个项目的子数组。 (一种二维数组)

一次渲染所有内容非常耗时，并且可能占用更多浏览器内存。决定继续将数据集分块为 5 并呈现它们。也就是说，将数据渲染分块，然后获取下一个 block 并渲染它。基于 1 秒的间隔。

这在 RxJS 中是如何实现的？

尝试过:

Rx.Observable.range(0, 10).map(i => data[i]).subscribe(...)

这需要前 10 条记录。所以我写了一个递归函数，将 10 更改为 iterator + 10，但是渲染数组项需要很多时间。尝试使用:

Rx.Observable.interval(0, 500).take(data.length).map(i => data[i]).subscribe(...)

这很好用。但这需要 1 来渲染每 500 毫秒的时间空间。我想俱乐部第一和第二。按 10 分块使用 500 毫秒渲染并获取下一个 block 。

Answer 1

您可以尝试使用 buffer 对数组进行分块。这假定 process 函数是同步的。

Rx.Observable.from(bigArray)
  .bufferWithCount(chunkSize)
  .do(process(chunk))

也就是说，如果 process 函数是同步的，为什么还要使用 Rxjs？将数组拆分为 block (参见 Split array into chunks 了解如何执行此操作)并在每个 block 上执行 process 函数。它可能更快并且占用更少的内存。