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）能夠根據每個對象內部的type屬性設置下次迭代發生的時間。

目前只有1）是可以滿足的。

Answer 1

訣竅是使用concatMap。 它將從每個項目創建一個可立即觀察到的項目，然后延遲一個空的Observable。 在該延遲之后，可觀察對象完成，並且下一個對象將被串聯。 這將使用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);