[RxJS] Starting a Stream with SwitchMap & switchMapTo
From an event map to another event we can use switchMap(), switchMap() accept an function which return an obervable.
The following code: When you click the button, it will start a interval to console out the count...
const Observable = Rx.Observable;
const startButton = document.querySelector('#start');
const start$ = Rx.Observable.fromEvent(startButton, 'click');
const interval$ = Observable.interval(400);
const startInterval$ = start$.switchMap( () => {
return interval$;
});
startInterval$.subscribe( (x) => {
console.log(x);
});
So the start$ switch map to a interval$ to avoid writting the nested subscribe function.
switchMap() actually is pretty useful when dealing with http event stream, it can help to cancel the previous http call.
switchMapTo(): which accept an observable:
/*
const startInterval$ = start$.switchMap( () => {
return interval$;
});*/ const startInterval$ = start$.switchMapTo( interval$ );
Tow pieces of code, works the same way.
[RxJS] Starting a Stream with SwitchMap & switchMapTo的更多相关文章
- [RxJS] Toggle A Stream On And Off With RxJS
This lesson covers how to toggle an observable on and off from another observable by showing how to ...
- [RxJS] Stopping a Stream with TakeUntil
Observables often need to be stopped before they are completed. This lesson shows how to use takeUnt ...
- [RxJS] Logging a Stream with do()
To help understand your stream, you’ll almost always want to log out some the intermediate values to ...
- [RxJS] Completing a Stream with TakeWhile
Subscribe can take three params: subscribe( (x)=> console.log(x), err=> console.log(err), ()=& ...
- [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" su ...
- rxjs简单入门
rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
- RxJS——Operators
RxJS 的操作符(operators)是最有用的,尽管 Observable 是最基本的.操作符最基本的部分(pieces)就是以申明的方式允许复杂的异步代码组合简化. 什么是操作符? 操作符是函数 ...
- angular7 Rxjs 异步请求
Promise 和 RxJS 处理异步对比 Promise 处理异步: let promise = new Promise(resolve => { setTimeout(() => { ...
随机推荐
- -bash: mysql: command not found 解决办法 (转)
root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下 ...
- shell脚本加密
如何保护自己编写的shell程序要保护自己编写的shell脚本程序,方法有很多,最简单的方法有两种:1.加密 2.设定过期时间,下面以shc工具为例说明: 一.下载安装shc工具shc是一个加密s ...
- Android Studio设置Eclipse风格快捷键
Android Studio的1.1.0版本都发布了,ADT也不会再更新了,童鞋们还有理由不换嘛,不要死守着Eclipse了,Android Studio是你唯一的也是最好的选择.什么?用Eclips ...
- 监听tableview的点击事件
// 监听tablview的点击事件 - (void)addAGesutreRecognizerForYourView { UITapGestureRecognizer *tapGesture = [ ...
- mybati之运行过程
mybatis其实就只有两个配置文件(mybatis-config.xml与mapper.xml) mybatis-config.xml配置基本的数据,和数据源,全局参数 mapper.xml 多个s ...
- jquery之前后台交互
//js文件 function getMinatoSingleGoodsCategorys(type){ $("#"+type+"MinatoGoodsCategoryI ...
- java对象Integer不能引用传递
java对象Integer不能引用传递 /** * The value of the <code>Integer</code>. * * @serial */ private ...
- .call()和.apply()相同点与不同点
.call()和.apply()相同点与不同点 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call ...
- MVC 5 下,应用log4net收集异常信息
1.安装log4net. 首先在VS中通过nuget安装logenet,我用的是VS2013,截屏如下:
- T-SQL 一次插入多行数据
使用 INSERT SELECT 向表中插入数据 --将t1中查询到的数据插入添加到t2中(t2表必须存在,且顺序.数据类型必须与t1一致) INSERT INTO t2(USERNAME,PASSW ...