[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 ...
随机推荐
- 理解 Word2Vec 之 Skip-Gram 模型
理解 Word2Vec 之 Skip-Gram 模型 天雨粟 模型师傅 / 果粉 https://zhuanlan.zhihu.com/p/27234078 508 人赞同了该文章 注明:我发现知乎有 ...
- luogu P2078 朋友
题目背景 小明在A公司工作,小红在B公司工作. 题目描述 这两个公司的员工有一个特点:一个公司的员工都是同性. A公司有N名员工,其中有P对朋友关系.B公司有M名员工,其中有Q对朋友关系.朋友的朋友一 ...
- CAS机制(多线程)
---- 什么是CAS机制 CAS机制主要是发生于Java中原子操作类(JUC)的底层实现中,其中在CAS机制中包含3个基本参数:内存地址V.旧预期值A.要修改的新值B. 当要更新一个变量的时候,只有 ...
- python字符串的格式化
# -*- coding:utf-8 -*- """ @Author:janson @Date:2018/8/1 @File:StrFormat.py "&qu ...
- Go:json(序列化、反序列化)
一.示例 package main import ( "encoding/json" "fmt" ) type Person struct { Name str ...
- tornado框架基础05-模板继承、UImodul和UImethods
01 模板继承 父模板 <html lang="en"> <head> <meta charset="UTF-8"> ...
- 2019年,Python工程师必考的6个面试题,Python面试题No5
第1题:Python里面如何实现tuple和list的转换? 函数tuple(seq)可以把所有可迭代的(iterable)序列转换成一个tuple, 元素不变,排序也不变 list转为tuple: ...
- 构造MaxTree
链接:https://www.nowcoder.com/questionTerminal/a502c7c3c65e41fdaf65eec9e0654dcb 来源:牛客网 [编程题]构造MaxTree ...
- LeetCode03--无重复字符的最长子串
''' 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "ab ...
- 关于自由拖拽完成的剪切区域(UI组件之图片剪切器)
var x, y,areaWidth,areaHeight; var down;//闪光的判断标准,很好 addEvent(canvas,'mousedown',function(e){ // con ...