rxjs 中的动态计时器

Question

我正在创建一个包含图像和视频的滑块，我想为每种类型分配一定的屏幕时间。

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）能够根据每个对象内部的类型属性设置下一次迭代发生的时间。

现在只有 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);

Answer 2

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 => {
   return Observable.of(media).delay(delayByMediaType[media.type])
}).subscribe(console.log);

rxjs 中的动态计时器

Dynamic timer in rxjs

javascript

arrays

rxjs

rxjs5