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; 
          }); 

は、私は上記のコードを使用して、すべてのスライドの一般的な時間を設定することができていますが、配列内の項目ごとに別々の値を設定しないことができません。ここで

は、それが無限に 2を反復完了すると0から最後のインデックスに配列を反復処理）私は実際に 1を達成したいものである）に基づいて次の反復が行われる時間を設定できるようにするには各オブジェクトの内部に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);