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. div与span

    div与span的区别: div标签属于块级元素,span标签属于行内元素,使用对比效果如下: <!DOCTYPE html> <html> <head lang=&qu ...

  2. oracle数据库exp/imp命令详解

    转自http://wenku.baidu.com/link?url=uD_egkkh7JtUYJaRV8YM6K8CLBT6gPJS4UlSy5WKhz46D9bnychTPdgJGd7y6UxYtB ...

  3. java 修改文件名

    // 修改文件名 public static boolean modifyFileName(String serverPath, String oldFileName, String newLogin ...

  4. Struts2:ValueStack

    一.ValueStack     1 .ValueStack是一个接口,在struts2中使用OGNL(Object-Graph Navigation Language)表达式实际上是使用       ...

  5. C++中的析构函数

    代码: #include <cstdio> #include <iostream> using namespace std; class A{ public: ~A(){ co ...

  6. CODEVS 1287 矩阵乘法

    1287 矩阵乘法  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 小明最近在为线性代数而头疼,线性代数确实很抽象(也很无聊) ...

  7. 转载:css3 box-shadow投影发光效果

    转载网址:http://www.wufangbo.com/css3-box-shadow/ CSS3的box-shadow属性 可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. bo ...

  8. linux下环境搭建比较

    xampp是一款初学者使用的集成的apache mysql与php配置安装包了,我们可以利用xampp来快速安装配置php环境,下面一起来看看吧.   要在linux服务器上面挂我们的php网站程序, ...

  9. instanceof操作符判断对象类型

    instanceof 的语法格式如下: myobject instanceof ExampleClass myobject:某类的对象引用 ExampleClass:某个类 class Quadran ...

  10. android ioctl fuzz,android 本地提权漏洞 android root

    目前正在研究android 三方设备驱动 fuzzer , 也就是下图所说的 ioctl fuzzing, 下图是由keen team nforest 大神发布: 欢迎正在研究此方面的人联系我共同交流 ...