RxJS-Observable Operators - switch, mergeAll, concatAll

concatAll

它会处理完前一个observable 才会在处理下一个observable

如果送出observable是无限的永远不会完成(complete)，就导致他永远不会处理之后送出的observable

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        map(e => interval(500).pipe(take(3)),    //  每500ms送出值,输出三次
        concatAll()
    );

click.subscribe(d => console.log(d));
/**
 * 点击后
 * 0
 * 1
 * 2
 * 3
 */

mergeAll

并行处理多个observable

另外mergeAll 可以传入一个数值，这个数值代表他可以同时处理的observable 数量

如果传入1，则效果和concatAll完全相同

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        map(e => interval(500).pipe(take(3)),    //  每500ms送出值,输出三次
        mergeAll(2)	//	并发2
    );

click.subscribe(d => console.log(d));
/**
 * 点击后
 * 0
 * 0
 * 1
 * 1
 * 2
 * 2
 */

switchAll

在新的observable送出后直接处理新的observable不管前一个observable是否完成，每当有新的observable送出就会直接把旧的observable退订(unsubscribe)，永远只处理最新的observable

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        map(e => interval(500).pipe(take(3)),    //  每500ms送出值,输出三次
        switchAll()
    );

click.subscribe(d => console.log(d));
/**
 * 点击后
 * 0
 * 1
 * 2
 */

附完整Deme Code：

const body = document.body;
const click = fromEvent(body, 'click')
    .pipe(
        map(e => interval(500).pipe(take(3))),    //  每500ms送出值,送3次停止
        concatAll(),     //  快速点击body，会按顺序输出三次0,1,2
        // switchAll(),     //  快速点击body，只输出一次0,1,2
        // mergeAll()          //   快速点击，会重复的输出多次0，1等。点击越多下，最后送出的频率就会越快。不会舍去，每次都会输出
    );

click.subscribe(d => console.log(d));