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. 爬虫学习之csv读取和存储

    一.读取 该读取主要使用到csv里面的Reader().DictReader()方法,和引用io里面的StringIO进行对字符串进行封装 在处理网上的csv文件方式主要是有一下几方面: • 手动把C ...

  2. js中数组删除 splice和delete的区别,以及delete的使用

    var test=[];test[1]={name:'1',age:1};test[2]={name:'2',age:2};test[4]={name:'3',age:3}; console.log( ...

  3. PHP01 LAMP网站构建

    学习要点 什么是web? 开发动态网站所需的web构件? 几种主流web应用程序平台? HTTP协议与web的关系? Web的工作原理? LAMP网站开发组合概述? 如何学习PHP? 什么是Web? ...

  4. PHP03 移动互联网和PHP

    学习要点 移动互联网 云计算 网络通信协议 Apache http服务器 PHP运行原理 学习目标 理解网络通信协议 掌握PHP运行原理 WAMP开发环境的搭建   移动互联网 定义 移动互联网,就是 ...

  5. oc学习

    http://www.cnblogs.com/qingyuan/p/3524678.html

  6. mysql两种常用备份工具

    一.mysqldump备份: 在开启GTID模式时,在master上执行的备份: --set-gtid-purged=OFF 在开启GTID模式时,要在slave上执行,想重新搭建一套slave环境. ...

  7. php函数之数组

    关联数组 isset bool isset( mixed $val [, mix $...]) 变量是否已设置并且非null.多个参数从左到右计算. 判断null $a=null;var_dump(i ...

  8. reversing.kr replace 之write up

    好似reversing除了前几个容易些,后面的都很难的.看wp都很困难.首先wp提示crtl+n查看程序所有函数,并且找到了测试函数: 补充: GetDlgItemInt函数通过发送控件WM_GETT ...

  9. 算法导论 第十二章 二叉搜索树(python)

    上图: 这是二叉搜索树(也有说是查找树的)基本结构:如果y是x的左子树中的一个结点,那么y.key <= x.key(如a图中的6根结点大于它左子树的每一个结点 6 >= {2,5,5}) ...

  10. 【02】sass更新的方法

    [02]更新的方法   gem install sass         **