Как изменять значение стрима после метода subscribe?

Question

[Nikita]

У меня возникло не обычное задание.
Есть таймер, нужно добавить кнопку, которая будет его останавливать на 300мс.
И все это нужно реализовать используя rxJS.

Не могу понять, как мне менять значение подписки после клика кнопки, наверное уже все обгуглил, все равно не могу найти нииичеегггоооо.

Если не сложно, хотелось бы увидеть еще живой пример как это сделано.

Answer 1

[Дмитрий Беляев]

https://rxjs.dev/api/index/function/fromEvent
https://rxjs.dev/api/operators/concatMap

Answer 2

[Антон Швец]

import { fromEvent, EMPTY, interval, merge, timer } from  'rxjs';
import  { scan, startWith, switchMap, mapTo, delay } from  'rxjs/operators';

const DELAY=1000;
const button = document.createElement('button');
button.textContent = 'Click me';
document.documentElement.appendChild(button);


const click$ = fromEvent(button, 'click').pipe(
  mapTo(false),
)
const unclick$ = click$.pipe(
  delay(DELAY),
  mapTo(true),
)

merge(click$, unclick$).pipe(
  startWith(true),
  switchMap(event => event ? timer(0, 1000) : EMPTY),
  scan(acc => acc + 1, 0),
)

это если я правильно понял

станавливатьна 300мс

означает "делать паузу"

Comments

[Nikita]

Буду очень благодарен, если еще сможете разжевать мне))

я только начинаю использовать rxJS в своем angular проекте и все еще пугаюсь когда нужно его использовать))

[Nikita]

в данный момент старт таймера у меня выглядит так

startTimer() {
    this.intervalStream$ = interval(1000);
    this.sub = this.intervalStream$
        .subscribe((value) => {
          this.subscribeTimer = this.convertSeconds(this.timeLeft - value);
          this.currentTime = this.timeLeft - value;
        });
  }

как я понял, мне нужно это переделать

[Антон Швец]

Nikita, в моем примере нажатие кнопки обрывает таймер, и после паузы он создается заново, а чтобы циферки шли я делаю "счетчик".
Хотя может проще сделать тикалку на setTimeout, вообще без rxjs операторов.