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的更多相关文章

  1. [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 ...

  2. [RxJS] Stopping a Stream with TakeUntil

    Observables often need to be stopped before they are completed. This lesson shows how to use takeUnt ...

  3. [RxJS] Logging a Stream with do()

    To help understand your stream, you’ll almost always want to log out some the intermediate values to ...

  4. [RxJS] Completing a Stream with TakeWhile

    Subscribe can take three params: subscribe( (x)=> console.log(x), err=> console.log(err), ()=& ...

  5. [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 ...

  6. rxjs简单入门

    rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...

  7. RxJS v6 学习指南

    为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...

  8. RxJS——Operators

    RxJS 的操作符(operators)是最有用的,尽管 Observable 是最基本的.操作符最基本的部分(pieces)就是以申明的方式允许复杂的异步代码组合简化. 什么是操作符? 操作符是函数 ...

  9. angular7 Rxjs 异步请求

    Promise 和 RxJS 处理异步对比 Promise 处理异步: let promise = new Promise(resolve => { setTimeout(() => { ...

随机推荐

  1. MySQL数据库的环境及简单操作

    ***********************************************声明*************************************************** ...

  2. 监听tableview的点击事件

    // 监听tablview的点击事件 - (void)addAGesutreRecognizerForYourView { UITapGestureRecognizer *tapGesture = [ ...

  3. JSON格式的各种转换

    /** *JSON 格式的解析 */ // json 去掉转义字符 message = message.replaceAll("\\\\", ""); //转成 ...

  4. jquery之营销系统(补偿记录)

    var appPath = getAppPath(); $(function(){ $("#opreateHtml").window("close"); $(& ...

  5. 网站项目后台的目录命名为admin后,网页莫名其妙的变样了

    这是我的第一篇博客文章,与其说是分享经验,倒不如说是求助 最近因为要完成一个课程设计,在拿一个现成的项目过来改,要用到select下拉菜单,可是发觉怎么我的这个下拉菜单怎么变样了 刚开始它是这样的 感 ...

  6. 递归生成树对象,应用于Easyui,Tree控件

    1.生成树节点对象 /// <summary> /// 生成树的节点 /// </summary> public class TreeNode { public TreeNod ...

  7. JSONP的原理

    JSONP的原理 JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的. <script type="text/j ...

  8. 输入框提示--------百度IFE前端task2

    第一版本: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  9. cad 画 tp图

    本文记录了cad 绘制 结构图 和触摸屏激光图. 1作为一个新手,我先要做的是适应操作界面. 页面:ctrl+鼠标滚轮 (类比,ps,ad等软件都是这样的.) 选取,划线,图层.等... 2画图... ...

  10. centos6 安装 lamp

    首先更新一下yum -y update 安装Apache yum install httpd httpd-devel 安装完成后,用/etc/init.d/httpd start 启动apache 设 ...