[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(() => { ...
随机推荐
- MySQL数据库的环境及简单操作
***********************************************声明*************************************************** ...
- 监听tableview的点击事件
// 监听tablview的点击事件 - (void)addAGesutreRecognizerForYourView { UITapGestureRecognizer *tapGesture = [ ...
- JSON格式的各种转换
/** *JSON 格式的解析 */ // json 去掉转义字符 message = message.replaceAll("\\\\", ""); //转成 ...
- jquery之营销系统(补偿记录)
var appPath = getAppPath(); $(function(){ $("#opreateHtml").window("close"); $(& ...
- 网站项目后台的目录命名为admin后,网页莫名其妙的变样了
这是我的第一篇博客文章,与其说是分享经验,倒不如说是求助 最近因为要完成一个课程设计,在拿一个现成的项目过来改,要用到select下拉菜单,可是发觉怎么我的这个下拉菜单怎么变样了 刚开始它是这样的 感 ...
- 递归生成树对象,应用于Easyui,Tree控件
1.生成树节点对象 /// <summary> /// 生成树的节点 /// </summary> public class TreeNode { public TreeNod ...
- JSONP的原理
JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...
- 输入框提示--------百度IFE前端task2
第一版本: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- cad 画 tp图
本文记录了cad 绘制 结构图 和触摸屏激光图. 1作为一个新手,我先要做的是适应操作界面. 页面:ctrl+鼠标滚轮 (类比,ps,ad等软件都是这样的.) 选取,划线,图层.等... 2画图... ...
- centos6 安装 lamp
首先更新一下yum -y update 安装Apache yum install httpd httpd-devel 安装完成后,用/etc/init.d/httpd start 启动apache 设 ...