RxJS与Math.random（）配合不好

Question

I am trying to learn Rxjs and I am seeing some behaviour that I did not expect. The javascript code in question is listed below

function updateText(css_link, observable){
  observable.subscribe(x => {
    const container = document.querySelector(css_link);
    container.textContent = `${x}`;
  });
}

function log(observable) {
  observable.subscribe(i => {
    console.log(i);
  });
}

let source = Rx.Observable.timer(0, 1000)
  .map(() => {return {value: Math.random()}});

let double = source
  .map(x => {return {value: x.value * 2}});

let diff = source
  .pairwise()
  .map(a => JSON.stringify(a));

updateText("#source", source.map(x => x.value));
updateText("#double", source.map(x => x.value));
updateText("#diff", diff);

It turns out that the output of the double stream are double values of new random numbers, not the random numbers that came from source . When looking at the output of diff I again get the impression that the random numbers are generated independantly in source , double and diff .

I am learning Rxjs and I may be missing a point. I thought that these streams are immutable but that they do depend on one another.

You can find a version of this code on jsbin with some html that is getting updated.

Answer 1

This is because every time you subscribe you're creating a new chain with a new source Observable. This means source , double and diff each one of them has its own timer.

You can see that this is true by printing a message to console every time you're creating a new timer:

let source = Rx.Observable.defer(() => {
  console.log('new source');
  return Rx.Observable.timer(0, 1000)
    .map(() => {return {value: Math.random()}});
});

Now you'll see three messages "new source" in console.

If you want to share a single source Observable you can use multicasting and in particular the share() operator.

let source = Rx.Observable.defer(() => {
  console.log('new source');
  return Rx.Observable.timer(0, 1000)
    .map(() => {return {value: Math.random()}});
}).share();

Now you'll see only one "new source" in console and it should work as you expect.

So your source can look like this:

let source = Rx.Observable.timer(0, 1000)
  .map(() => {return {value: Math.random()}})
  .share();

Your updated demo: https://jsbin.com/guyigox/3/edit?js,console,output