[RxJS] Split an RxJS observable with window
Mapping the values of an observable to many inner observables is not the only way to create a higher order observable. RxJS also has operators that take a first order observable and return a higher order Observable. In this lesson we will learn about window, an operator to split an observable.
'window' main task is to split observable to multi inner observables. That allows me do something useful to individual inner observable, such as 'scan' & 'count'.
const clickObservable = Rx.Observable.fromEvent(document, 'click');
const clockObservable = Rx.Observable.interval(); const resultObservable = clockObservable
.window(clickObservable)
.map(obs => obs.count())
.switch(); /*
--0---1---2---3---4---5---6---7---8|
--------c-----------c---c----------- window +-------+-----------+---+----------+
\ \ \ \ \
--0---1-|-2---3---4-|-5-|-6---7---8| .map(o => o.count()) --------+-----------+---+---------+
\ \ \ \
-------2|----------3|--1|--------3| switch --------2-----------3---1---------3
*/ resultObservable
.subscribe(x => console.log(x));
[RxJS] Split an RxJS observable with window的更多相关文章
- [RxJS] Split an RxJS observable conditionally with windowToggle
There are variants of the window operator that allow you to split RxJS observables in different ways ...
- [RxJS] Split an RxJS Observable into groups with groupBy
groupBy() is another RxJS operator to create higher order observables. In this lesson we will learn ...
- [RxJS] Stopping a shared observable execution
ConnectableObservable has the connect() method to conveniently dictate the start of the shared execu ...
- [RxJS] Introduction to RxJS Marble Testing
Marble testing is an expressive way to test observables by utilizing marble diagrams. This lesson wi ...
- [AngularJS + RxJS] Search with RxJS
When doing search function, you always need to consider about the concurrent requests. AEvent ----(6 ...
- Angular快速学习笔记(4) -- Observable与RxJS
介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...
- RxJS——可观察的对象(Observable)
可观察的(Observable) 可观察集合(Observables)是多值懒推送集合.它们填补了下面表格的空白: SINGLE MULTIPLE Pull Function Iterator Pus ...
- rxjs简单入门
rxjs全名Reactive Extensions for JavaScript,Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据.状态.事件等等转成可被观察的序列(Obser ...
- RxJS v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
随机推荐
- 通过NFS、FTP、HTTP三种方法安装Redhat Linux (高清版)
本节教程讲述了通过在Red Hat Linux服务器端假设NSF Server来进行Linux系统安装的过程,并详细介绍了如何制作网络启动盘的细节.演示直观,讲解通俗易懂,特别适合初学者学 ...
- [Javascript AST] 4. Continue: Report ESLint error
const disallowedMethods = ["log", "info", "warn", "error", & ...
- 玩转Bootstrap(基础) -- (6.导航条基础)
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- ZOJ 题目3587 Marlon's String(KMP)
Marlon's String Time Limit: 2 Seconds Memory Limit: 65536 KB Long long ago, there was a coder n ...
- ES5比较Jquery中的each与map 方法?
1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...
- xpath使用方法详解id 、starts-with、contains、text()和last() 的用法
1.XPATH使用方法 使用XPATH有如下几种方法定位元素(相比CSS选择器,方法稍微多一点): a.通过绝对路径定位元素(不推荐!) WebElement ele = driver.findEle ...
- JDBC 专题
digest: getFetchSize()方法不是获得记录数,而是获得每次抓取的记录数,默认是0,也就是说不限制.可以用setFetchSize()来设置,而getFetchSize()是用来读出那 ...
- [Angular] New async 'as' syntax and ngIf.. else
From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' ...
- swift开发多线程篇 - NSThread 线程相关简单说明(一些使用和注意点)
一 说明 本文涉及代码可以从https://github.com/HanGangAndHanMeimei/Code地址获得. 二 NSThread的基本使用和创建 1)基本用法(主线程|当前线程) 1 ...
- maven 配置Project Facets时further configuration available不出来问题
如果下边的 further configuration available不出来 把Dynamic web module 去掉勾选,应用与项目,然后再点开项目的properties,再选中Dynami ...