Separate observable values by specific amount of time in RxJS

Question

What would be the most idiomatic way to yield values of an Observable by a specific amount of time? For example, let's say I have an Observable created from a big Array and I want to yield a value every 2 seconds. Is a combination of interval and selectMany the best way?

Answer 1

For your specific example, the idea is to map each value from the array to an observable that will yield its result after a delay, then concatenate the resulting stream of observables:

var delayedStream = Rx.Observable     .fromArray([1, 2, 3, 4, 5])     .map(function (value) { return Rx.Observable.return(value).delay(2000); })     .concatAll(); 

Other examples might indeed make use of timer or interval. It just depends.

For example, if your array is really really big, then the above will cause a fair amount of memory pressure (because it is creating N observables for a really large N). Here is an alternative that uses interval to lazily walk the array:

var delayedStream = Rx.Observable     .interval(2000)     .take(reallyBigArray.length) // end the observable after it pulses N times     .map(function (i) { return reallyBigArray[i]; }); 

This one will yield the next value from the array every 2 seconds until it has iterated over the entire array.

Answer 2

I think that using zip produce better and more readable code, still using just 3 observables.

var items = ['A', 'B', 'C'];  Rx.Observable.zip(   Rx.Observable.fromArray(items),   Rx.Observable.timer(2000, 2000),     function(item, i) { return item;} )