SOURCE

/**
 * rxjs version 6.5.3
 * github: https://rxjs-cn.github.io/learn-rxjs-operators/operators/combination/combinelatest.html
 */

// conbineLatest 当任意 observable 发出值时，combineLatest会发出每个 observable 的最新值。

// 样例1 使用3个定时任务
const { interval, combineLatest, timer, fromEvent } = rxjs;
const { mapTo, startWith, scan, tap, map } = rxjs.operators;

const observable1 = interval(1000);

const observable2 = interval(1000);

const observable3 = interval(1000);
// combineLatest 会将3个对象合并为一个数组的格式
const combine = combineLatest(observable1, observable2, observable3);
// 此时的 n 是一个数组的格式，[observable1, observable2, observable3]
// combine.subscribe(n => console.log(n));

// 可以使用解构的方式获取参数
// combine.subscribe(([ob1, ob2, ob3]) => 
// console.log(`observable1 is ${ob1}, observable2 is ${ob2}, observable 3 is ${ob3}`));

// 样例2 使用projection 函数的 combineLatest
const timeOne = timer(1000, 3000);
const timeTwo = timer(2000, 3000);
const timeThree = timer(3000, 3000);
// combineLatest 的最后一个流的后一个参数项就是 projection 函数
const combine1 = combineLatest(timeOne, timeTwo, timeThree, (one, two, three) => {
    return `one is ${one}, two is ${two}, three is ${three}`;
});
// 这样的话输出内容就是projection 函数的返回值
// combine1.subscribe(n => console.log(n));

// 样例3 组合2个按钮事件
// 定义一个设置 html 值的函数，id 和 val 是函数的入参
const setHtml = id => val => (document.getElementById(id).innerText = val);
    

<h5>样例3</h5>
<div>
  <button id='red' class="btn btn-danger">Red</button>
  <button id='black' class="btn btn-primary">Black</button>
</div>
<div>Red: <span id="redTotal"></span> </div>
<div>Black: <span id="blackTotal"></span> </div>
<div>Total: <span id="total"></span> </div>