angular - 暂停/恢复计时器 Observable

Question

我正在使用 angular/rxjs6 构建一个简单的秒表，我可以启动计时器，但无法暂停/恢复它。

  source: Observable<number>;
  subscribe: Subscription;

  start() {
    this.source = timer(0, 1000);
    this.subscribe = this.source
      .subscribe(number => {
        this.toSeconds = number % 60;
        this.toMinutes = Math.floor(number / 60);
        this.toHours = Math.floor(number / (60 * 60));

        this.seconds = (this.toSeconds < 10 ? '0' : '') + this.toSeconds;
        this.minutes = (this.toMinutes < 10 ? '0' : '') + this.toMinutes;
        this.hours = (this.toHours < 10 ? '0' : '') + this.toHours;
    });
  }

  pause() {
    this.subscribe.unsubscribe(); // not working
  }

经过大量搜索，我发现我应该使用 switchMap操作符来实现这一点，但我是 rxjs 的新手，不知道如何以正确的方式做到这一点。

任何帮助将非常感激。

Answer 1

这是使用 rxjs 6 的 node.js 片段。除非 p，否则将发出计时器事件。被按下。再次按下时，发射继续(ctrl-c 将退出)。

在内部，当暂停器发出 false 时，实际上启动了一个新的计时器。 .因此，我们在 ( concat ) 暂停符前面加上 false发射启动第一个计时器。 2 scan运算符(operator)管理链的状态(暂停切换器 + 计数器)。

import { timer, concat, NEVER, of, fromEvent } from 'rxjs';
import { scan, tap, filter, switchMap } from 'rxjs/operators';
import { emitKeypressEvents } from 'readline';

process.stdin.setRawMode(true);
emitKeypressEvents(process.stdin);

const keypresses$ = fromEvent(process.stdin, 'keypress', (_, key) => key);
const pauser$ = keypresses$.pipe(
  tap(key => {
    if (key && key.ctrl && key.name == 'c') {
      process.exit(0);
    }
  }),
  filter(key => key.name === 'p'),
  scan(acc => !acc, false),
);

const starter$ = of(false);
concat(starter$, pauser$)
  .pipe(
    switchMap(stopped => (stopped ? NEVER : timer(0, 1000))),
    scan(acc => acc + 1, 0),
  )
  .subscribe(console.log);