[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'); 解决这个问题,可以使用深链 ...
随机推荐
- optionMenu-普通菜单使用
首先结合如下的代码来看 package com.android.settings; import android.R.integer; import android.app.Fragment; imp ...
- shell-查看手机分辨率
使用如下命令,可以查看手机分辨率 adb shell dumpsys window displays 运行结果如下 Display: mDisplayId= init=1080x1920 480dpi ...
- menuconfig_kconfig
这一节的主要内容: Menuconfig的操作 Kconfig和.config文件 Linux内核配置裁剪实验 linux编译器通过.config文件确认哪些代码编译进内核,哪些被裁减掉 menuco ...
- [RxJS] How To get the results of two HTTP requests made in sequence
switchMap can chain two HTTP requests together, creating one request based on the results of the fir ...
- 关于腾讯云server使用FTP具体配置教程
本文文件夹:-------------------------------------------------------- [-] 腾讯云server介绍 关于腾讯云server使用感受 作为开发人 ...
- 关于python的冒号截取
https://zhidao.baidu.com/question/877855739656978372.html
- 快速搭建REST API——json server
一:全局安装json-server npm install json-server -g 二:在自己项目跟目录下存放mock/data.json,json内容如下: { "roles&quo ...
- (转) 设置sqlplus中的退格键
转自:http://blog.itpub.net/26110315/viewspace-717249/ 有些时候当你使用sqlplus登录到数据库中的时候,敲错了命令想要删除修改的时候,发现以前敲入的 ...
- Surging Demo 项目之一
原文:Surging Demo 项目之一 开发与运行环境 IDE Visual Stadio 2017/Visual Stadio 2019 Visual Stadio Core Docker 和 D ...
- [Web Security] Create a hash salt password which can stored in DB
We cannot directly store user password in the database. What need to do is creating a hashed & s ...