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. mfc socket编程

    socket编程用法---- 随着计算机网络化的深入,计算机网络编程在程序设计的过程中变得日益重要.由于C++语言对底层操作的优越性,许多文章都曾经介绍过用VC++进行Socket编程的方法.但由于都 ...

  2. java.lang.NoSuchMethodError: org.apache.commons.io.FileUtils.getTempDirectory()Ljava/io/File;

    我出现这个问题的原因是使用ueditor上传图片 如果不是commons.io的jar包缺失,就是jar包有冲突 另外:最新的ueditor(1.4.3.1)使用的是commons-io-2.4.ja ...

  3. LSI SAS 3008配置操作

    配置 LSI SAS 3008 介绍LSISAS3008的配置操作. 4.1 登录CU界面 介绍登录LSISAS3008的CU配置界面的方法. 4.2 创建RAID 介绍在LSISAS3008扣卡上创 ...

  4. 新唐Cortex-M0微控制器的省电管理

    新唐科技的NUC1xx包含NUC101.NUC100.NUC120.NUC130和NUC140,是以ARM Cortex-M0为核心的32位微控制器(MCU),经由不同时钟的设定,最高可以达到 50M ...

  5. Python-xml解析常用方法简介

    [XML几种解析方法] 常见的XML编程接口有DOM和SAX,这两种接口处理XML文件的方式不同,使用场合自然也就不同. Python有三种方法解析XML: SAX,DOM,以及ElementTree ...

  6. HTML5和CSS3实例教程[总结二]

    基于contenteditable属性实现在位编辑 HTML5规范引入了contenteditable属性,它几乎可以用在任何元素上,只要添加这一属性 即可变为可编译区域 <!DOCTYPE h ...

  7. Request.ServerVariables 服务器环境变量

    Request.ServerVariables["Url"] 返回服务器地址 Request.ServerVariables["Path_Info"] 客户端提 ...

  8. Access中的SELECT @@IDENTITY

    在Access数据库中存在select @@identity吗?答案是肯定的.但是Access一次只能执行一条SQL,多条SQL需要多次执行,这是限制.在SQL Server中,可以一次执行多条SQL ...

  9. 深入了解session

    session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的含义也很不相同.这里只探讨HTTP S ...

  10. 在 Windows 下部署 Go 语言环境

    http://bbs.chinaunix.net/thread-4088281-1-1.html 1. 首先下载官方二进制安装包:32 位选择 windows-386.msi64 位选择 window ...