我正在创建一个包含图像和视频的 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) 可以满足。
最佳答案
诀窍是使用 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);
关于javascript - rxjs 中的动态定时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44351478/