zl程序教程

您现在的位置是:首页 >  其它

当前栏目

[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---------------          
*/