rxjs中的动态计时器

Question

I am creating a slider with images and videos and am want to assign a certain amount of screen time for each type.

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

I am able to set a generic time for all the slides using the code above but am unable to do set separate values for each of the items in the array.

Here is what I actually want to achieve 1) Iterate through the array from 0 to the last index once it has completed iterating infinitely 2) To be able to set a time when the next iteration takes place based on the type property inside each object.

Right now only 1) is satisfiable.

Answer 1

The trick would be to use concatMap. It will create from each item an immediate observable with the item followed by a delay of an empty Observable. After that delay the observable completes, and the next one will be concatenated. This will be repeated infinitely with the repeat() operator.

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