[RxJS] Starting a Stream with SwitchMap & switchMapTo
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的更多相关文章
- [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 ...
- [RxJS] Stopping a Stream with TakeUntil
Observables often need to be stopped before they are completed. This lesson shows how to use takeUnt ...
- [RxJS] Logging a Stream with do()
To help understand your stream, you’ll almost always want to log out some the intermediate values to ...
- [RxJS] Completing a Stream with TakeWhile
Subscribe can take three params: subscribe( (x)=> console.log(x), err=> console.log(err), ()=& ...
- [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 ...
- rxjs简单入门
rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
- RxJS——Operators
RxJS 的操作符(operators)是最有用的,尽管 Observable 是最基本的.操作符最基本的部分(pieces)就是以申明的方式允许复杂的异步代码组合简化. 什么是操作符? 操作符是函数 ...
- angular7 Rxjs 异步请求
Promise 和 RxJS 处理异步对比 Promise 处理异步: let promise = new Promise(resolve => { setTimeout(() => { ...
随机推荐
- android GestureDetector 手势的判断
import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.Ges ...
- 函数返回char* 的解决方案
在C语言中,自动变量在堆栈中分配内存.当包含自动变量的函数或代码块退出时,它们所占用的内存便被回收,它们的内容肯定会被下一个所调用的函数覆盖.这一切取决于堆栈中先前的自动变量位于何处,活动函数声明了什 ...
- jquery之多重判断
var appPath = getAppPath(); $(function(){ $('#addTeskDlg').window('close'); teskGrid(); }); function ...
- 打开局域网项目,显示“项目位置不受信任”的解决办法(VS2008)
弄了几天,网上搜了个遍,愣是解决不了,绝望的时候闭着眼睛胡搞,居然解决了,哈哈.... 开发环境:visual studio 2008 项目位置:局域网其他电脑内 出现问题: 1.弹出“”的对话框,如 ...
- 【nodejs学习】3.进程管理及异步编程
进程管理 1.调用终端命令实现目录目录拷贝 var child_procress = require('child_procress'); var util = require('util'); fu ...
- ORACLE的order by中文排序
在使用order by排序的时候,出现如下情况: 印象中中文排序应该默认是按照拼音排序的,为何"鑫"会排在"中"的后面呢?猜想order by是不是根据对应 ...
- C++中多重继承构造函数执行顺序
代码1: #include <cstdio> #include <iostream> using namespace std; class A{ public: A(){ co ...
- Jquery 判断IE
if( $.browser.msie && ( $.browser.version == '7.0' || $.browser.version == '8.0' ) ){ alert( ...
- 一个基础的CURL类
/** * 一个基础的CURL类 * * @author Smala */ class curl{ public $ch; public $cookie = '/cookie'; public $rs ...
- js获取下拉列表(select)选中项的值和文本
获取下拉列表选中项的值和文本(select) <html> <head> <meta charset="utf-8"/> <title&g ...