RxJS Operators - concatMap , switchMap

concatMap

concatMap可以看成是 map + concatAll

html

<button #click>click</button>

component.ts

export class Page1Component implements OnInit {  @ViewChild('click', { static: true }) click: ElementRef;    source: Observable<any>;    example: Observable<any>;  constructor() { }  ngOnInit() {       this.source = fromEvent(this.click.nativeElement, 'click');    this.example = this.source.pipe(concatMap(() => interval(1000).pipe(take(3))));    this.example.subscribe(v => console.log(v));  }}

将click事件转换成observable。
事件触发后，concatMap里的callback function会每隔一秒，依序送出0、1、2。

若在3秒内连续点击的话

会发现，先送出一组012，再送出下一组012，并不会有互相穿插的情况发生。

官网的弹珠图

当callback function还在处理元素为3的observable期间，下一个元素5的observable已经送出在等候，但依旧得等元素3处理完后，才能处理元素5。

concatMap重要特性：
它会先等一个observable完成后，再继续订阅下一个observable。
意思就是，每个待处理的observable都得乖乖排队，前一个处理完，才能继续下一个。

switchMap

将上面範例的concatMap改成switchMap即可。

只触发一次click事件，依旧每隔一秒，依序送出0、1、2，跟concatMap一样。

若在3秒内连续点击的话

会发现，第一个observable并未送出2，而是直接处理下一个observable。

官网的弹珠图

当callback function还在处理元素为3的observable期间，下一个元素5的observable已经送出，这时就不再处理元素为3的observable，改为处理元素5的observable。

switchMap重要特性：
只要有新的observable送出，就会取消订阅前一个observable，转为处理新的observable。

参考资料：
Rxjs-concatMap
Rxjs-switchMap