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. Codeforces 328A-IQ Test(数列)

    A. IQ Test time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  2. JS高级程序设计学习笔记之第三章基本概念(语法,数据类型,流控制语句,函数)——查漏补缺

    一.语法: 区分大小写; 2.标识符:就是指变量.函数.属性的名字,或者函数的参数 a.标志符的规则:①第一个字符必须是一个字母.下划线(_)或一个美元符号($).                   ...

  3. C# 数学运算符

    运算符大致分为如下3类: 一元运算符,处理一个操作符 二元运算符,处理两个操作数 三元运算符,处理三个操作数 大多数运算符都是二元运算符,只有几个一元运算符和一个三元运算符,即条件运算符(条件运算符是 ...

  4. Fragement理解

    ■ 初衷 可重用,碎片化UI,适应大屏幕pad和小屏幕手机 ■ 优点 自行控制加入,移除,交换. activity则由framework深度掌管. 切换流畅 模块化(逻辑上切割处理)   缺点带来额外 ...

  5. Linq/List/Array/IEnumerable等集合操作

    来源:http://www.cnblogs.com/liushanshan/archive/2011/01/05/1926263.html 目录 1    LINQ查询结果集    1 2    Sy ...

  6. (原)anaconda 的安装与在pycharm中的版本切换

    参考网页: http://continuum.io/blog/anaconda-python-3 http://conda.pydata.org/docs/intro.html#creating-py ...

  7. SmartQQ二维码登陆接口分析

    SmartQQ是腾讯在Web上推出的一款单纯的聊天工具,pc端与移动端都可以访问,接下来具体的分析下登陆流程. 网站:http://w.qq.com/ 工具:这个随意能够看到http数据包就可以,浏览 ...

  8. WinFrm访问MVC数据

    WinFrm使用HttpWebRequest访问MVC中的Controller,以注册为例,客户端输入注册码后点击注册. WinFrm注册代码:代码中使用的是Post提交,UTF8编码方式. priv ...

  9. Apache之AllowOverride参数详解

    通常利用Apache的rewrite模块对 URL 进行重写的时候, rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对 ...

  10. python文件_读取

    1.文件的读取和显示 方法1: f=open(r'G:\2.txt') print f.read() f.close() 方法2: try: t=open(r'G:\2.txt') print t.r ...