switchMap is mergeMap that checks for an "inner" subscription. If the "inner" subscription exists, switchMap unsubscribes from that "inner" subscription which effectively "cancels" any pending pushes.

import { fromEvent, of, Subscriber } from "rxjs"
import {
scan,
delay,
mergeMap,
switchMap
} from "rxjs/operators" class MySwitchMapSubscriber extends Subscriber {
innerSubscription constructor(sub, fn) {
super(sub) this.fn = fn
} _next(value) {
console.log(`outer`, value)
const o$ = this.fn(value) if (this.innerSubscription) {
this.innerSubscription.unsubscribe()
} this.innerSubscription = o$.subscribe({
next: value => {
console.log(` inner`, value)
this.destination.next(value)
}
})
}
} const mySwitchMap = fn => source =>
source.lift({
call(sub, source) {
source.subscribe(
new MySwitchMapSubscriber(sub, fn)
)
}
}) const observable$ = fromEvent(
document,
"click"
).pipe(
scan(i => i + , ),
mySwitchMap(value => of(value).pipe(delay()))
) const subscriber = {
next: value => {
console.log(value)
},
complete: () => {
console.log("done")
},
error: value => {
console.log(value)
}
} observable$.subscribe(subscriber)

[RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through的更多相关文章

  1. [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete

    Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...

  2. [RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through

    Understanding sources and subscribers makes it much easier to understand what's going on with mergeM ...

  3. [RxJS] Implement the `map` Operator from Scratch in RxJS

    While it's great to use the RxJS built-in operators, it's also important to realize you now have the ...

  4. [RxJS] exhaustMap vs switchMap vs concatMap

    exhaustMap: It drop the outter observable, just return the inner observable, and it waits until prev ...

  5. [RxJS] Implement pause and resume feature correctly through RxJS

    Eventually you will feel the need for pausing the observation of an Observable and resuming it later ...

  6. [RxJS] Use RxJS concatMap to map and concat high order observables

    Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this le ...

  7. [RxJS] Use RxJS mergeMap to map and merge high order observables

    Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...

  8. [RxJS] Chain RxJS Operators Together with a Custom `pipe` Function using Array.reduce

    Instead of writing complex operators, it's usually best to write simple, single-purpose operators th ...

  9. [RxJS] Convert RxJS Subjects to Observables

    The use of RxJS Subjects is common, but not without problems. In this lesson we will see how they ca ...

随机推荐

  1. 整理几个牛人博客以及OJ

    Blogs 陈立杰(wjmzbmr):http://wjmzbmr.com/ 飘过的小牛:http://blog.csdn.net/niushuai666 王垠:http://www.yinwang. ...

  2. 计算机网络之TCP拥塞控制

    1. 首先,拥塞控制和流量控制是不一样的. 拥塞控制是防止过多的数据注入到网络中,可以使网络中的路由器或链路不致过载,是一个全局性的过程.  流量控制是点对点通信量的控制,是一个端到端的问题,主要就是 ...

  3. rc-local.service服务启动失败,导致rc.local中的开机启动服务不能启动

    chmod  +x   /etc/rc.d/rc.local 打开/etc/rc.local文件,将启动非后台执行的指令的最后添加 &,以使相关指令后台运行,然后启动服务 systemctl  ...

  4. python:零散记录

    1.rstrip()删除末尾指定字符串 例如:A = '1,2,3,4,5,' B = A.rstrip(',') B = '1,2,3,4,5' 2.isdigit()方法 Python isdig ...

  5. CSS3---圆角设置

    1.border-radius是向元素添加圆角边框.border-radius:10px; /* 所有角都使用半径为10px的圆角 */     border-radius: 5px 4px 3px ...

  6. Vijos 1308 埃及分数(迭代加深搜索)

    题意: 输入a.b, 求a/b 可以由多少个埃及分数组成. 埃及分数是形如1/a , a是自然数的分数. 如2/3 = 1/2 + 1/6, 但埃及分数中不允许有相同的 ,如不可以2/3 = 1/3 ...

  7. nginx.conf的完整配置说明

    #用户 用户组 user www www; #工作进程,根据硬件调整,有人说几核cpu,就配几个,我觉得可以多一点 worker_processes 5: #错误日志 error_log logs/e ...

  8. dataTables中固定表头

    dataTables中固定表头 加入  bAutowidth:false, <style> #dayReveiveMoney_payment_list_table_wrapper .dat ...

  9. K/3Cloud二次开发基于WebDev附加进程调试

    大部分人在进行K/3cloud二次开发插件的调试时,选择的是附加IIS进程w3wp调试,本文给大家介绍一下基于WebDev附加进程调试,不用重启iis. 步骤如下: 1)拷贝K/3cloud产品安装目 ...

  10. Asp.Net Thread is being Aborted

    Asp.Net做的一个程序,通过JQuery的Ajax调用,程序执行的数据时间比较长,程序部署到服务器后执行一段时间后就弹出执行失败的对话框,日志记录的错误信息是“正在中止线程”. 查错过程: 1.根 ...