[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. In this lesson we will explore the windowToggle variant and see one of its use cases in user interfaces.
Let's say we want to build a new functionality, it only receive the source when mousedown and stop receiving data when mouse up.
To do that we can use 'windowToggle':
const clockObs = Rx.Observable.interval();
const downObs = Rx.Observable.fromEvent(document, 'mousedown');
const upObs = Rx.Observable.fromEvent(document, 'mouseup'); const source = clockObs
.windowToggle(downObs, () => upObs)
.switch()
.subscribe(console.log); /*
--0--1--2--3--4--5--6--7--8--9--
windowToggle
----------D--------U-------------
\
-3--4--5-| switch / mergeAll -----------3--4--5---------------
*/
[RxJS] Split an RxJS observable conditionally with windowToggle的更多相关文章
- [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 ...
- [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 v6 学习指南
为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...
- 《深入浅出RxJS》读书笔记
rxjs的引入 // 如果以这种方式导入rxjs,那么整个库都会导入,我们一般不可能在项目中运用到rxjs的所有功能 const Rx = require('rxjs'); 解决这个问题,可以使用深链 ...
随机推荐
- 37.Node.js工具模块---处理和转换文件路径的工具 Path模块
转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js path 模块提供了一些用于处理文件路径的小工具,我们可以通过以下方 ...
- 使用NPOI时写的几个辅助方法
简介:包含:获取单元格合并信息GetMergedCellAddress.获取引用单元格字符串ConvertAddressToString.获取单元格字符串格式内容CellValueToString p ...
- spring jdbcTemplate使用queryForList示例
查询代码: LogVo 日志要显示的内容(Log的部分或者全部列) Log是日志完整的实体 public List<LogVO> findLogByDate(String startDat ...
- 关于img标签的探讨
关于img标签的探讨:一直以来img属于那一种标签受到困惑,因为它既有块元素的特性也有行内元素的属性.它独占一行,也可以设置宽高. 在此重新学习一下标签元素的分类;html元素的分类:块元素.内联元素 ...
- erroe:plot.new() : figure margins too large
使用R时多次出现这个错误,plot.new() : figure margins too large,提示图片边界太大 解决方法,win.graph(width=4.875, height=2.5,p ...
- maven仓库快速镜像
国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...
- [1,2,3].forEach(alert);这样的写法有什么利和弊吗?
以下这个问题遇到了之后.问了太阳神,以下是太阳神的解答: [1,2,3].forEach(alert);这样的写法有什么利和弊吗? 首先forEach使用方法非常easy降低代码量, 可是也有非常多地 ...
- eclipse-12.04无图标,无法固定到侧边栏
今天下载了adt-bundle,但是eclipse打开以后,侧边栏显示的是一个问好,而且没办法固定到侧边栏,导致每次打开eclipse都要进入到相应目录,很麻烦.我们可以通过如下方法设置eclipse ...
- progerssbar-style 属性分析
先看如下代码 <ProgressBar android:id="@+id/stateProgressBar" android:orientation="horizo ...
- 12. ZooKeeper之Java客户端API使用—创建会话。
转自:https://blog.csdn.net/en_joker/article/details/78686649 客户端可以通过创建一个ZooKeeper(org.apache.zookeeper ...