SOURCE

/**
 * rxjs 为最新版 6.5.3
 * github: https://github.com/ReactiveX/rxjs
 */
const { range, fromEvent, interval } = rxjs;
const { map, filter, flatMap, switchMap, mergeMap } = rxjs.operators;

const length = document.getElementById('length');
const width = document.getElementById('width');

// mergeMap 和 flatMap 都会保留所有的流对象，并且将所有流对象扁平化输出
const length$ = fromEvent(length, 'keyup')
    .pipe(mergeMap(_ => {
        return interval(1000);
    }));

// switchMap 当接收到一个新的流对象时，switchMap 会将在这个流对象之前的流全部放弃掉，只取最新的流
const width$ = fromEvent(width, 'keyup')
    .pipe(switchMap(_ => {
        return interval(1000);
    }));

// length 的内层也是 observable 对象，所以如果使用了flatMap 会将所有的内层流对象全部扁平化输出
length$.subscribe(l => {
    console.log(l);
});

width$.subscribe(w => console.log(w));

长度：<input type="text" id="length" /><br>
宽度：<input type="text" id="width" />