CombineLatest is not taking the latest value in rxjs

Question

this is the code

const timerOne = timer(1000, 4000).pipe(
  map(x=>`1-${x}-${new Date().getSeconds()}`)
)
//timerTwo emits first value at 2s, then once every 4s
const timerTwo = timer(2000, 4000).pipe(
  map(x=>`2-${x}-${new Date().getSeconds()}`)
);
//timerThree emits first value at 3s, then once every 4s
const timerThree = timer(3000, 4000).pipe(
  map(x=>`3-${x}-${new Date().getSeconds()}`)
);

//when one timer emits, emit the latest values from each timer as an array
const combined = combineLatest(timerOne, timerTwo, timerThree);

const subscribe = combined
.pipe(take(5))
.subscribe(
  ([timerValOne, timerValTwo, timerValThree]) => {   
    console.log(
     ` ${timerValOne},
    ${timerValTwo},
     ${timerValThree}`
    );
  }
);

this is the definition for combineLatest() in rxjs

will not emit an initial value until each observable emits at least one value.

now from the above defintion, the output should be

1-2-56,
2-1-57,
3-0-58

instead of

1-0-56,
2-0-57,
3-0-58

because, we will only get the value of the timerThree Observable after 3second by that time the latest value for timerOne would be 2 and the latest value for timerTwo would be 1, am i missing something, please help, thank you

kos kos · Accepted Answer · 2019-04-04T10:22:39

Your timers will first emit in [1s, 2s, 3s] and will continue at 4s rate.

So the first time when all streams will emit is at 3s.

Next events on combineLatest (when all streams have emitted and any of the streams emit a new event) are: 5s, 6s, 7s ...

Heres an illustration for

const timerOne = timer(100, 400);
const timerTwo = timer(200, 400);
const timerThree = timer(300, 400);
combineLatest(timerOne, timerTwo, timerThree, (...arr)=>arr.join('-'));

And this is a playground for combineLatest with timers

Hope this helps

CombineLatest is not taking the latest value in rxjs

1 Answers