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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [RxJS] Stopping a shared observable execution

    ConnectableObservable has the connect() method to conveniently dictate the start of the shared execu ...

  4. [RxJS] Introduction to RxJS Marble Testing

    Marble testing is an expressive way to test observables by utilizing marble diagrams. This lesson wi ...

  5. [AngularJS + RxJS] Search with RxJS

    When doing search function, you always need to consider about the concurrent requests. AEvent ----(6 ...

  6. Angular快速学习笔记(4) -- Observable与RxJS

    介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持在应用中的发布者和订阅者之间传递消息. 可观察对象可以发送多个任意类型的值 -- 字面量.消息.事件. 基 ...

  7. RxJS——可观察的对象(Observable)

    可观察的(Observable) 可观察集合(Observables)是多值懒推送集合.它们填补了下面表格的空白: SINGLE MULTIPLE Pull Function Iterator Pus ...

  8. RxJS v6 学习指南

    为什么要使用 RxJS RxJS 是一套处理异步编程的 API,那么我将从异步讲起. 前端编程中的异步有:事件(event).AJAX.动画(animation).定时器(timer). 异步常见的问 ...

  9. 《深入浅出RxJS》读书笔记

    rxjs的引入 // 如果以这种方式导入rxjs,那么整个库都会导入,我们一般不可能在项目中运用到rxjs的所有功能 const Rx = require('rxjs'); 解决这个问题,可以使用深链 ...

随机推荐

  1. ArcGIS小技巧——多图层情况下交互显示效果

    在使用ArcMap处理数据的过程中,通常需要对比不同图层之间的差异.或者查看影像配准情况,这时我通常会怀念ENVI中的强大的拉幕显示.闪烁.亮度和透明度显示工具...... 直到有一天,闲着没事干捣鼓 ...

  2. 设计模式六大原则(三):依赖倒置原则(Dependence Inversion Principle)

    依赖倒置原则(DIP)定义: 高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象. 问题由来: 类A直接依赖类B,假如要将类A改为依赖类C,则必须通过修改类A的代码 ...

  3. Moodle 中文 API 之 文件管理API

    File API  文件管理 文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...

  4. nodeJS+socket.io传递消息

    服务器端 安装express,socket.io npm install express --save-dev npm install socket.io --save app.js const ex ...

  5. ajax获取服务器响应信息

    window.onload = function(){ document.getElementById('btn').onclick = function(){ var req = new XMLHt ...

  6. linux删除svn版本号库

    当使用了svn版本号控制系统后每一个文件夹下都会有一个.svn文件夹存在,开发完当交付产品或者上传到server时一般要把这些文件夹删除.事实上在linux删除这些文件夹是非常easy的,命令例如以下 ...

  7. Android 文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)

    一.URI 通用资源标志符(Universal Resource Identifier, 简称"URI"). Uri代表要操作的数据,Android上可用的每种资源 - 图像.视频 ...

  8. java三大特性:封装、继承、多态

    Java三大特性之封装   一.定义 封装性指的是将对象的状态信息隐藏在对象内部,不允许外部程序直接访问对象内部的信息,而是通过该类所提供的方法来实现对内部信息的操作和访问. 二.使用封装的好处: 1 ...

  9. c++读取lua配置基础类

    一.内容介绍 把lua作为配置文件,里面的参数值的获取,在他人基础上做了修改,并且补充了一维数组的处理方式. 若有不足之处请多多指教. 对于二维数组,没有成功.希望大家继续补充和修改,非常感谢! 二. ...

  10. Cmake 实现debug和release lib依赖项处理

    一.说明 最近用cmake开发东西,编译vs时候,发现debug和release版本的lib库的依赖项问题,故此小结一下.若有不对之处,还请看官多多指教. 使用的工程有自己编写的工程,也有借用第三方库 ...