rxjs - 从不断增长的数组中重复发出值

Question

快速上下文:我正在显示“实时”图像幻灯片，这意味着在显示图像时，用户可以上传图像并且这些新图像应该显示(最终)。这是“无限”，这意味着我想在所有图像都发出后从第一张图像重新开始。新传入的图像应该排到队列的末尾并在我循环回它们时发出。
我想出了一个我认为是肮脏和不正确的解决方案，归结为:

const srcArray = [-2, -1];
const userImageUpload$ = interval(2000).pipe(
  tap((val) => srcArray.push(val))
).subscribe();

const liveImages$ = zip(interval(1000), from(srcArray)).pipe(
  map(([a, b]) => b),
  repeat()
).subscribe((val) => console.log("Image " + val));

这里我们有一些“图像”的起始数组。 userImageUpload$代表新图像传入的想法。当我得到一个时，我将它插入起始数组。 liveImages$代表我想要发出的值。这在技术上是有效的，但是改变这个共享的全局数组感觉很糟糕并且可能会导致问题。是否有一个很好的解决方案来完成这一切，可能是使用主题？我在想出解决方案时遇到了麻烦。

Answer 1

我会保留一个 currentImages$ observable 累积所有上传的图像，和一个 currentImageIndex$ observable 保留当前应该显示的图像的索引。
然后是liveImages Observable(结合了两者)就是你想要的结果。

const currentImages$ = userImageUpload$.pipe(
    scan((acc, curr) => [...acc, curr], [])
);

const currentImageIndex$ = interval(SLIDE_SHOW_INTERVAL).pipe(
    withLatestFrom(currentImages$),
    map(([, currImages]) => currImages),
    scan((accIndex, currImagesArr) => (accIndex + 1) % currImagesArr.length, 0)
);

const liveImages$ = currentImageIndex$.pipe(
    withLatestFrom(currentImages$),
    map(([currIndex, currImages]) => currImages[currIndex])
);