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. 63.当当网txt数据按行切割与合并

    获取文件有多少行 //获取文件有多少行 int getN(char *path) { FILE *pf = fopen(path, "r"); if (pf==NULL) { ; ...

  2. android:一个Open键引发的问题!!

    1.问题简单介绍 首先描写叙述一下问题.当我们安装完APP的时候,界面会显示两个button,一个完毕键,一个Open键,点击Open键之后.进入应用.此时.我们点击HOME键.程序将会后台.然后再点 ...

  3. code-代码平台服务器路径

    下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...

  4. FreeMarker template error: The following has evaluated to null or missing

    使用freemarker前端分页,报错: FreeMarker template error: The following has evaluated to null or missing 后端直接赋 ...

  5. cookie记住用户名密码

    <script src="js/jquery.cookie.js" type="text/javascript"></script> $ ...

  6. C# foreach 循环遍历数组

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  7. Swiper+ ejs模板引擎+ iScroll插件知识总结

    一. Swiper swiper是一个应用于移动端的动画插件,原理类似于轮播图 官网 http://www.swiper.com.cn/# html结构 <div class="swi ...

  8. python3 登录验证小程序,同一用户输错三次密码,锁定账户

    ''' 让用户输入用户名密码 认证成功后显示欢迎信息用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态''' # !/usr/bin/env python # -*- coding:u ...

  9. Day1:用户交互与格式化输出

    一.用户交互 1.input()方法 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan username = inpu ...

  10. UML学习总结(2)——StartUML 各种类图的例子

    1.UML分为: 1)静态建模:系统基础和系统固定框架结构,这些图形往往是"静态"的. 类图(Class Diagram):常用来分析业务概念 用例图(Use Case Diagr ...