[RxJS] Implement pause and resume feature correctly through RxJS

Posted 2020-09-20 Answer1215

Eventually you will feel the need for pausing the observation of an Observable and resuming it later. In this lesson we will learn about use cases where pausing is possible, and what to do when pausing is impossible.

 

const resume$ = new Rx.Subject();

const res$ = resume$
  .switchMap(resume =>
    resume ?
      Rx.Observable.interval(2000) :
      Rx.Observable.empty()
  )
  .do(x => console.log(‘request it! ‘ + x))
  .switchMap(ev => Rx.Observable.ajax({
    url: ‘https://jsonplaceholder.typicode.com/users/1‘,
    method: ‘GET‘,
  }));

res$.subscribe(function (data) {
  console.log(data.response);
});

resume$.next(false);
setTimeout(() => resume$.next(true), 500);
setTimeout(() => resume$.next(false), 5000);

 

here use 

Rx.Observable.empty()

inside switchMap(), it means if code goes to empty(), then the rest of code:

 .do().switchMap()

won‘t run.

 

If just subscribe, it trigger complete function:

var source = Rx.Observable.empty();

var subscription = source.subscribe(
  function (x) {
    console.log(‘Next: %s‘, x);
  },
  function (err) {
    console.log(‘Error: %s‘, err);
  },
  function () {
    console.log(‘Completed‘);
  });
  
// => Completed