如何在文档点击时暂停和恢复 observable？

Question

I have an observable that emits certain values to the console on every second. I show an example below and a StackBlitz as well.

My dilemma is I need to able to pause it on the next document click and resume it (not restart it) it on the next one again. I was looking into switchMap and I couldn't figure out how to implement it.

export class AppComponent implements OnInit {
  title = "my-app";
  pageClickObservable: Observable<Event> = fromEvent(document, "click");

  ngOnInit(): void {
    new Observable();

    const watchForClick = () => {
      setTimeout(() => {
        console.log("A");
      }, 1000);
      setTimeout(() => {
        console.log("BB");
        console.log("10");
      }, 2000);
      setTimeout(() => {
        console.log("CCC");
      }, 3000);
      setTimeout(() => {
        console.log("DDDD");
        console.log("20");
      }, 4000);
      setTimeout(() => {
        console.log("EEEEE");
      }, 5000);
      setTimeout(() => {
        console.log("FFFFFF");
        console.log("30");
      }, 6000);
    };

    this.pageClickObservable.pipe().subscribe(() => {
      watchForClick();
    });
  }
}

Answer 1

I think you want something like this:

const $myContinuousObs = ...... // This is your observable that keeps emitting
const $isOn = new BehaviourSubject(true); // BehaviorSubject to store the current on/off state

combineLatest([$myContinuousObs, $isOn]).pipe( //combine the two
    filter(res => res[1]), // only continue when $isOn is true
    map(res => res[0]) // return only the myContinuousObs and not the $isOn
).subscribe(console.log) // log the value

To change $onOff :

$isOn.next(true)
$isOn.next(false)

To toggle $onOff

$isOn.pipe(take(1)).subscribe(val => $onOff.next(!val))

Answer 2

you need to turn your page click into some stream that can track the state of the switch using scan like so:

const clickStream$ = fromEvent(document, 'click').pipe(
  scan((isOn, click) => !isOn, true), // on every click, toggle the switch
  startWith(true) // initially emit true
)

then you can just switchMap :

clickStream$.pipe(
  switchMap(isOn => isOn ? obs$ : EMPTY)
).subscribe(v => console.log(v, 'got value'))

where obs$ is whatever you want to start and stop listening to. now this method with switchMap will resubscribe on each clickStream$ emission, which depending on the nature of the observable of interest, may not be what you're after, but the concept of the clickStream$ observable may still be useful to you combined with the other answer here using filter

Answer 3

Check this out:

import { Component, OnInit } from "@angular/core";
import { fromEvent, Observable } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "my-app";
  pageClickObservable: Observable<Event> = fromEvent(document, "click");

  pause = false; // creating a variable to track the pause
  ngOnInit(): void {
    new Observable();

    this.pageClickObservable.pipe().subscribe(() => {
      this.pause = !this.pause; // change the pause status - true / false at alternative clicks
    });


 // mimicking observable sending data every second
    setInterval(() => {
      if (!this.pause) {
        // if not pause then execute the complete functions
        console.log("Click");
      } else {
        console.log("Do nothing");
      }
    }, 1000);
  }
}

This will simply console "Click" and "Do nothing" based on clicks.

For example, you have an observable sending data at every second, let's say, setInterval

If they share a common variable, such as this.pause in this case, then you can pause and resume easily.

Answer 4

What I've done is to create an operator that delays the value based on a numerical property value.

delayByProperty.ts

import {of, NEVER} from 'rxjs';
import {concatMap, delay} from 'rxjsoperators';

export function delayByProperty(propertyNameOfSecondsDelay:string) {
  return concatMap(obj => {
    const seconds:any = obj[propertyNameOfSecondsDelay];
    if (!seconds) {
      return of(obj);
    } else if (!Number.isFinite(seconds)) {
      throw new TypeError(`object property "${propertyNameOfSecondsDelay}" expected to be falsy or a number, was ${typeof(secondsDelay)} with value of ${secondsDelay}.`);
    } else if (seconds === -1) {
      return NEVER;
    } else if (seconds > 0) {
      return of(obj).pipe(
        delay(seconds * 1000)
      )
    }
  });
}

Now you can do

from([1,2,3,2,5,2,1]).pipe(
    map(n => {value:n, seconds:Number.parseFloat(n)}),
    delayByProperty('seconds')
)

Answer 5

When dealing with Observables, I've found it useful to think less like a programmer and more like a plumber. :-) Consider this:

function getObservableOfMsgs(click$) {
    //Array of objects that have whatever values you want in them, plus a property of "seconds" that contains the number of seconds you want to delay.
    const objs = [{msg:'1', seconds:1},{msg:'2', seconds:2},{msg:'TWO', seconds:2}];
    // observable we want per click.
    const perClick$ = from(objs).pipe(
        // map each object into an observable that delays, then emits the msg... and combine all of those observables to happen simultaneously.
        mergeMap(({msg, seconds}) => of(msg).pipe(delay(seconds * 1000)))
    );

    return click$.pipe(
        mapTo(perClick$)
    );
}

and now you'll have an observable that emits a pattern of messages per time you click.

So if you have a function called doSomethingWithMessage that takes a msg as a single argument and returned either null or a message you wanted to log as a debug message, you could do...

const unsubscribeFunctionInCaseINeedIt = getObservableOfMsgs(click$).pipe(
    tap(doSomethingWithMessage)
).subscribe(
    (d) => if (d !== null) console.debug(d),
    (e) => console.error(e),
    ()  => console.log('Complete!')
)

and then, until you call the returned function, it will all just "happen" as events stream through.

from and of are part of rxjs, so you should be able to import {from, of} from 'rxjs' Hopefully this automatically resolves because rxjs is part of Angular. Likewise, you might also have to import {mergeMap, delay, mapTo, tap} from 'rxjs/operators' or something, but I'm unable to access StackBlitz to confirm for you.