[RxJS] Split an RxJS observable conditionally with windowToggle

Posted 2020-08-24 Answer1215

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