javascript - rxjs 中的动态定时器

Question

我正在创建一个包含图像和视频的 slider ，并且希望为每种类型分配一定量的屏幕时间。

let data =  [{"path":"http://localhost:8091/public/testimg.jpg","type":"image"},{"path":"http://localhost:8091/public/testvideo.mp4","type":"video"}]
Observable.timer(0, 3000)
                            .map(e => { 
                                console.log(e); return data[e % data.length]; 
                            })
                            .subscribe(item => {
                                this.activeItem = item;
                            });

我可以使用上面的代码为所有幻灯片设置通用时间，但无法为数组中的每个项目设置单独的值。

这就是我真正想要实现的目标1)一旦完成无限迭代，就从0开始迭代数组到最后一个索引2) 能够根据每个对象内的 type 属性设置下一次迭代发生的时间。

目前只有 1) 可以满足。

Answer 1

诀窍是使用 concatMap。它将根据每个项目创建一个立即可观察量，该项目后跟一个空可观察量的延迟。在该延迟之后，可观察的完成，并且下一个将被连接。这将使用repeat() 运算符无限重复。

let data =  [{"path":"http://localhost:8091/public/testimg.jpg","type":"image"},{"path":"http://localhost:8091/public/testvideo.mp4","type":"video"}];

const delayByMediaType = {image: 1000, video: 5000};

Observable.from(data)
    .concatMap(media => 
        Observable.of(media).concat(Observable.empty().delay(delayByMediaType[media.type]))
    )
    .repeat()
    .do(console.log)
    .subscribe(item => this.activeItem = item);