[RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through
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的更多相关文章
- [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete
Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...
- [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 ...
- [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 ...
- [RxJS] exhaustMap vs switchMap vs concatMap
exhaustMap: It drop the outter observable, just return the inner observable, and it waits until prev ...
- [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 ...
- [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 ...
- [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( ...
- [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 ...
- [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 ...
随机推荐
- Vue 2.0 右键菜单组件 Vue Context Menu
Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c
- Windows 7桌面显示图标窗口句柄的获取
在windows XP时代,我们获取桌面图标窗口的句柄往往用一下语句: HWND hwndParent = ::FindWindow( "Progman", "Progr ...
- ideal取消按下两次shift弹出搜索框 修改idea,webstrom,phpstrom 快捷键double shift 弹出search everywhere
因为经常需要在中英文之间切换,所以时常使用shift键,一不小心就把这个Searchwhere 对话框调出来了,很是麻烦. 因此痛定思痛, 我决定将这个按两下shift键就弹出搜索框的快捷键禁用了! ...
- python之str (字符型)
用途: 存储少量的数据,+ *int 切片, 其他操作方法 切片还是对其进行任何操作,获取的内容全部是strl类型 存储数据单一 格式: 在python中用引号引起来的就是字符串 '今天吃了没?' 1 ...
- Java 垃圾回收机制 (分代垃圾回收ZGC)
什么是自动垃圾回收? 自动垃圾回收是一种在堆内存中找出哪些对象在被使用,还有哪些对象没被使用,并且将后者删掉的机制.所谓使用中的对象(已引用对象),指的是程序中有指针指向的对象:而未使用中的对象(未引 ...
- CF528D Fuzzy Search 字符串匹配+FFT
题意: DNA序列,在母串s中匹配模式串t,对于s中每个位置i,只要s[i-k]到s[i+k]中有c就认为匹配了c.求有多少个位置匹配了t. 分析: 这个字符串匹配的方式,什么kmp,各种自动机都不灵 ...
- Hash冲突的几种解决方法
1. 开放定值法: 也叫再散列法,当关键字key的哈希地址p=H(key)出现冲突时,以p为基础,产生另一个哈希地址p1,如果p1仍然冲突,再以p为基础,产生另一个哈希地址p2,…,直到找出一个不冲突 ...
- alt、title和label
alt是html标签的属性,而title既是html标签,又是html属性. title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的. ti ...
- 由Java实现Valid Parentheses
一.题目 Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...
- Python爬虫-代理池-爬取代理入库并测试代理可用性
目的:建立自己的代理池.可以添加新的代理网站爬虫,可以测试代理对某一网址的适用性,可以提供获取代理的 API. 整个流程:爬取代理 ----> 将代理存入数据库并设置分数 ----> 从数 ...