RxJs SwitchMapTo 操作符之移花接木
操作符 Rxjs
2023-09-14 09:04:00 时间
将每个源值投影到同一个 Observable,该 Observable 在输出 Observable 中使用 switchMap 多次展平。
输入一个 Observable,输出一个 function Operator. 实际是一个函数,每次在源 Observable 上发出值时,该函数都会返回一个 新的 Observable.
该函数从给定的 innerObservable 发出项目,并且仅从最近投影的内部 Observable 中获取值。
看个例子:
import { EMPTY, range } from 'rxjs';
import { first, take, tap } from 'rxjs/operators';
import { fromEvent, interval } from 'rxjs';
import { switchMapTo } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const test = event => console.log('Jerry: ', event);
const result = clicks.pipe(
tap(test),
switchMapTo(interval(1000))
);
result.subscribe(x => console.log(x));
输出:
每次点击之后,click$ 抛出的 PointerEvent,被 switchMapTo 返回的 Function Operator 丢弃了。最后用户订阅 result 函数里,打印的值,是 switchMapTo 输入的 interval(1000) Observable 发射的值,而不再是 clicks$ 抛出的 PointerEvent.
再看另一个在网页显示倒计时数字的例子。
import './style.css';
import { interval, fromEvent } from 'rxjs';
import {
switchMapTo,
scan,
startWith,
takeWhile,
finalize
} from 'rxjs/operators';
const COUNTDOWN_TIME = 10;
// reference
const countdownElem = document.getElementById('countdown');
// streams
const click$ = fromEvent(document, 'click');
const countdown$ = interval(2000).pipe(
scan((acc, _) => --acc, COUNTDOWN_TIME),
startWith(COUNTDOWN_TIME)
);
click$
.pipe(
switchMapTo(countdown$),
takeWhile(val => val >= -10),
finalize(() => (countdownElem.innerHTML = "We're done here!"))
)
.subscribe((val: any) => (countdownElem.innerHTML = val));
初始整数是10,每隔2秒钟减一,减到 -10 时停止。
思路:触发计数器开始递减的操作是点击屏幕,因此需要使用 fromEvent 来构造 Observable :click$
每隔两秒钟执行某项操作,因此需要用 interval 构造第二个 Observable.
一旦计数器启动之后,每隔两秒钟需要执行递减操作,因此需要用 switchMapTo,将 click$ 映射成 interval Observable.
之后的值传递,就和 click$ 再无任何关联了。
因为是递减操作,暗示这是一个 stateful 场景,故选用 scan 操作符维护内部状态。
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- 实现string类的操作符重载 + = > < == != >> <<
- RxJava 操作符 on和doOn 线程切换 调度 Schedulers 线程池 MD
- (笔试题)不用除法操作符,实现两个正整数的除法
- Linux shell中比较操作符“==”与“-eq”对比
- MySQL UNION 和 UNION all 操作符将两个结果集合并一个表
- typescript ts keyof操作符使用示例
- SAP 电商云 Spartacus UI ActiveCartService 的 isStable API 里的 debounce 和 timer 操作符
- rxjs Observable 两大类操作符简介
- scss百分号操作符的一个使用例子
- paip.操作符重载的缺失 Java 的一个大缺点
- Rxjs takeWhile 和 filter 操作符的区别
- scss里的继承操作符@extend
- rxjs of操作符生成的Observable对象的执行详细分析
- 玩转GaussDB 中的SET操作符
- Groovy 安全导航(safe-navigation)操作符(?.)
- 赋值操作符
- 长表达式要在低优先级操作符处拆分成新行
- C++11 __pragma操作符