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. -bash: mysql: command not found 解决办法 (转)

    root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下 ...

  2. shell脚本加密

      如何保护自己编写的shell程序要保护自己编写的shell脚本程序,方法有很多,最简单的方法有两种:1.加密 2.设定过期时间,下面以shc工具为例说明: 一.下载安装shc工具shc是一个加密s ...

  3. Android Studio设置Eclipse风格快捷键

    Android Studio的1.1.0版本都发布了,ADT也不会再更新了,童鞋们还有理由不换嘛,不要死守着Eclipse了,Android Studio是你唯一的也是最好的选择.什么?用Eclips ...

  4. 监听tableview的点击事件

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

  5. mybati之运行过程

    mybatis其实就只有两个配置文件(mybatis-config.xml与mapper.xml) mybatis-config.xml配置基本的数据,和数据源,全局参数 mapper.xml 多个s ...

  6. jquery之前后台交互

    //js文件 function getMinatoSingleGoodsCategorys(type){ $("#"+type+"MinatoGoodsCategoryI ...

  7. java对象Integer不能引用传递

    java对象Integer不能引用传递 /** * The value of the <code>Integer</code>. * * @serial */ private ...

  8. .call()和.apply()相同点与不同点

    .call()和.apply()相同点与不同点 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call ...

  9. MVC 5 下,应用log4net收集异常信息

    1.安装log4net. 首先在VS中通过nuget安装logenet,我用的是VS2013,截屏如下:

  10. T-SQL 一次插入多行数据

    使用 INSERT SELECT 向表中插入数据 --将t1中查询到的数据插入添加到t2中(t2表必须存在,且顺序.数据类型必须与t1一致) INSERT INTO t2(USERNAME,PASSW ...