[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'); 解决这个问题,可以使用深链 ...
随机推荐
- excel表如何实现多if选择结构多分支判断
excel表如何实现多if选择结构多分支判断 一.总结 一句话总结:把多if分支转换成单if分支相加. 也可以if分支,也可以lookup函数. 1.CHOICE: +2 if band A; +1 ...
- javascript创建对象的方法--构造函数模式
javascript创建对象的方法--构造函数模式 一.总结 构造函数模式作用和不足 1.作用:解决工厂模式不是用new关键字来创建对象的弊端 2.作用:解决工厂模式创建的实例和模型没有内在联系的问题 ...
- 理性分析 C++(-O2) 和 JS 的性能差距
laptop: Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz.. Test1: 最后一行:时间(ms) #pragma GCC optimize("O2& ...
- 18.C语言多线程总结
创建一个线程 _beginthread(myfun, , NULL);//返回值是一个HANDLE hd[i] = CreateThread(NULL, , add, NULL, , NULL);// ...
- cc1.exe -fno-stack-protector
# github.com/mattn/go-sqlite3 cc1.exe: error: unrecognized command line option "-fno-stack-prot ...
- golang webservice[ json Martini webframe]
golang webservice[ json Martini webframe] https://github.com/brunoga/go-webservice-sample 自己修改了一下例子, ...
- 洛谷——P1781 宇宙总统
https://www.luogu.org/problem/show?pid=1781 题目背景 宇宙总统竞选 题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人 ...
- 不是IT圈人的IT创业优劣势!
不是IT圈人的IT创业优势: 1)更尊重市场导向而非技术 2)更关注产品细节而非技术 3)更关注企业平衡而非技术 不是IT圈人的IT创业劣势: 1)因营销而放弃技术规划 2)因需求而丧失技术 ...
- C++源文件到可运行文件的过程
一.四个步骤 对于C/C++编写的程序,从源码到可运行文件,一般经过以下四个步骤: 1).预处理,产生.ii文件 2).编译,产生汇编文件(.s文件) 3).汇编,产生目标文件(.o或.obj文 ...
- Android学习笔记之ViewFlipper
<1>被添加到ViewFlipper中的两个或两个以上的视图之间将执行一个简单的ViewAnimator动画.一次仅能显示一个子视图.如果需要,可以设置间隔时间使子视图像幻灯片一样自动显示 ...