[RxJS] Split an RxJS observable conditionally with windowToggle
with an Rxjs split Observable
2023-09-14 09:00:52 时间
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(1000); 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--------------- */
相关文章
- ASTER:An Attentional Scene Text Recognizer with Flexible Rectification
- [Javascript] Remove an Event Listener with removeEventListener
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [DevOps] Set up and run a PostgreSQL instance locally with Docker Compose
- [Javascript] Create an Async Generator and Loop Through Generated Promises with "For Await Of" Loops
- [Recompose] Stream a React Component from an Ajax Request with RxJS
- [PReact] Integrate Redux with Preact
- [Anuglar] Directive with controller
- [Typescript] Creating Chainable Method Abstractions with Generics and the Builder Pattern - 05
- [VSCode] Visually Organize Applications in VS Code with Window Color-Coding
- [Git] Recover Local Changes from `git reset --hard` with `git reflog`
- [Javascript] Wrap an API with a Proxy
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
- [Recompose] Stream a React Component from an Ajax Request with RxJS
- [React] Create a queue of Ajax requests with redux-observable and group the results.
- [rxjs] Creating An Observable with RxJS
- 成功解决ImportError: Something is wrong with the numpy installation. While importing we detected an olde
- AI:人工智能领域之《A Simple Tool to Start Making Decisions with the Help of AI—借助人工智能开始决策的简单工具》翻译与解读
- 成功解决IndexError: index 14 is out of bounds for axis 1 with size 14
- 已解决This key is associated with a deactivated account. If you feel this is an error, contact us throu
- 论文解读(GGD)《Rethinking and Scaling Up Graph Contrastive Learning: An Extremely Efficient Approach with Group Discrimination》
- 启动WIFI时:equest firmware failed with error 0xfffffffe ifconfig: SIOCSIFFLAGS: Operation not permitted
- Improving Few-Shot Learning with Auxiliary Self-Supervised Pretext Tasks(论文解读)