javascript - Why my rxjs combineLatest output only 2 times? - Stack Overflow

admin管理员组

文章数量:1023782

Consider the following [email protected] code:

{
  const source1 = Rx.Observable.of(1, 2, 3);
  const source2 = Rx.Observable.of(4, 5);

  const bined = Rx.ObservablebineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

<script src=".5.11/Rx.min.js"></script>

Consider the following [email protected] code:

{
  const source1 = Rx.Observable.of(1, 2, 3);
  const source2 = Rx.Observable.of(4, 5);

  const bined = Rx.Observable.bineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

<script src="https://cdnjs.cloudflare./ajax/libs/rxjs/5.5.11/Rx.min.js"></script>

I imagined this result would be something like this:

(emit 1 time and gives lasted)

value1 Latest: 3
value2 Latest: 5

or

(emit 3 times and gives lasted from each)

value1 Latest: 1
value2 Latest: 4
value1 Latest: 2
value2 Latest: 5
value1 Latest: 3
value2 Latest: 5

but actually it is:

(emit 2 times and gives lasted from each)

value1 Latest: 3
value2 Latest: 4
value1 Latest: 3
value2 Latest: 5

Why?

• javascript
• rxjs
• rxjs5

Share Improve this question Follow edited Jun 15, 2018 at 10:20 Peter Hall 59.1k1515 gold badges165165 silver badges227227 bronze badges asked Jun 15, 2018 at 9:47 mitsuruogmitsuruog 1,45933 gold badges1414 silver badges2121 bronze badges 1

• staltz./primer-on-rxjs-schedulers.html – cartant Commented Jun 15, 2018 at 13:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Neither of these observables have any delay. As soon as you subscribe, source1 will instantly emit all of the values 1, 2, 3. And then it subscribes to source2 and each of the values that it emits are bined with the latest value, 3, from source1.

Adding a tiny delay between each value will force each event to be emitted in sequence. React will even respect a zero delay to enforce this ordering. The result is that it will alternately take one event from each:

{
  const source1 = Rx.Observable.of(1, 2, 3)
    .zip(Rx.Observable.timer(0, 0), (x, _) => x);

  const source2 = Rx.Observable.of(4, 5)
    .zip(Rx.Observable.timer(0, 0), (x, _) => x);

  const bined = Rx.Observable.bineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

value1 Latest: 1
value2 Latest: 4
value1 Latest: 2
value2 Latest: 4
value1 Latest: 2
value2 Latest: 5
value1 Latest: 3
value2 Latest: 5

Visual explanation may be good here. The reason may be your first and second observables emitted something like the following:

First observable:  -----1------2------3
Second observable: -----------------------4-----5
Result:            ---------------------[3,4]--[3,5]

Please note that the bineLatest will wait till both observables emit values.

Consider the following [email protected] code:

{
  const source1 = Rx.Observable.of(1, 2, 3);
  const source2 = Rx.Observable.of(4, 5);

  const bined = Rx.ObservablebineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

<script src=".5.11/Rx.min.js"></script>

Consider the following [email protected] code:

{
  const source1 = Rx.Observable.of(1, 2, 3);
  const source2 = Rx.Observable.of(4, 5);

  const bined = Rx.Observable.bineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

<script src="https://cdnjs.cloudflare./ajax/libs/rxjs/5.5.11/Rx.min.js"></script>

I imagined this result would be something like this:

(emit 1 time and gives lasted)

value1 Latest: 3
value2 Latest: 5

or

(emit 3 times and gives lasted from each)

value1 Latest: 1
value2 Latest: 4
value1 Latest: 2
value2 Latest: 5
value1 Latest: 3
value2 Latest: 5

but actually it is:

(emit 2 times and gives lasted from each)

value1 Latest: 3
value2 Latest: 4
value1 Latest: 3
value2 Latest: 5

Why?

• javascript
• rxjs
• rxjs5

Share Improve this question Follow edited Jun 15, 2018 at 10:20 Peter Hall 59.1k1515 gold badges165165 silver badges227227 bronze badges asked Jun 15, 2018 at 9:47 mitsuruogmitsuruog 1,45933 gold badges1414 silver badges2121 bronze badges 1

• staltz./primer-on-rxjs-schedulers.html – cartant Commented Jun 15, 2018 at 13:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Neither of these observables have any delay. As soon as you subscribe, source1 will instantly emit all of the values 1, 2, 3. And then it subscribes to source2 and each of the values that it emits are bined with the latest value, 3, from source1.

Adding a tiny delay between each value will force each event to be emitted in sequence. React will even respect a zero delay to enforce this ordering. The result is that it will alternately take one event from each:

{
  const source1 = Rx.Observable.of(1, 2, 3)
    .zip(Rx.Observable.timer(0, 0), (x, _) => x);

  const source2 = Rx.Observable.of(4, 5)
    .zip(Rx.Observable.timer(0, 0), (x, _) => x);

  const bined = Rx.Observable.bineLatest(source1, source2);

  const subscribe = bined.subscribe(([value1, value2]) => {
    console.log(`value1 Latest: ${value1}`);
    console.log(`value2 Latest: ${value2}`);
  });
}

value1 Latest: 1
value2 Latest: 4
value1 Latest: 2
value2 Latest: 4
value1 Latest: 2
value2 Latest: 5
value1 Latest: 3
value2 Latest: 5

Visual explanation may be good here. The reason may be your first and second observables emitted something like the following:

First observable:  -----1------2------3
Second observable: -----------------------4-----5
Result:            ---------------------[3,4]--[3,5]

Please note that the bineLatest will wait till both observables emit values.

本文标签： javascriptWhy my rxjs combineLatest output only 2 timesStack Overflow