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. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  2. Fortran中常用函数列表

    Y=INT(X) 转换为整数 ALL(所有型态) INTEGER Y=REAL(X) 转换为实数 INTEGER REAL Y=DREAL(X) 取复数实部(倍精度) COMPLEX*16 REAL* ...

  3. (8) tomcat中管理领域、角色及用户

    srverlet Container或web应用程序本身都可以提供控制web应用程序资源的安全防护 前者称为容器管理的安全防护,或者称为应用程序管理安全防护 通过内嵌机制,tomcat提供一些安全防护 ...

  4. Linux基础学习-RPM

    目录 1. RPM简介 2. 常用软件安装工具 3. RPM命令参数 4. 使用范例 4.1 查看rpm包信息 4.2 查看rpm包内容 4.3 查看rpm包依赖 4.4 安装rpm包 4.5 卸载r ...

  5. mysql 删除恢复

    一.模拟误删除数据表的恢复 1 二进制日志功能启用 vim /etc/my.cnf [mysqld] log-bin 2  完全备份 mysqldump -A -F --master-data=2 - ...

  6. LeetCode(21)Merge Two Sorted Lists

    题目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicin ...

  7. [SQL]数据库中对值为数字,存储格式为varchar类型的字段进行排序

    如果要对数据库中某存储数字的列(存储类型不为int)进行排序,可以在order by 里对该列进行转换, 即如 order by cast(mycolumn as int) desc

  8. luogu4093 [HEOI2016/TJOI2016]序列

    因为一个变化只会变化一个值,所以 \(dp[i]=max(dp[j])+1,j<i,maxval_j \leq a[i], a[j] \leq minval_i\) 发现跟二维数点问题挺像,树状 ...

  9. python002 Python3 基础语法

    python002 Python3 基础语法 编码默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -* ...

  10. Leetcode 284.顶端迭代器

    顶端迭代器 给定一个迭代器类的接口,接口包含两个方法: next() 和 hasNext().设计并实现一个支持 peek() 操作的顶端迭代器 -- 其本质就是把原本应由 next() 方法返回的元 ...