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。它將從每個項目創建一個可立即觀察的項目，然後延遲一個空的Observable。在延遲之後，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);