Question

我有一项服务，我会自动每隔30秒调用一次方法。我还有一个按钮，允许用户重置计时器，防止此方法再被调用30秒。如何重置我的计时器，以便在单击按钮的情况下，在30秒内不会调用此方法？

COMPONENT

constructor(private service: Service) {
  this.service.initialize();
}

refreshTimer(): void {
  this.service.refreshTimer();
}

SERVICE

initialize(): void {
    timer(0, 30000).subscribe(() => this.refresh());
}

refreshTimer(): void {
  // Need help here
}

如您所见，我的组件从其构造函数调用initialize（），该构造函数初始化计时器以每30秒运行this.refresh（）。我的想法是我的html将在组件中调用refreshTimer（），最终将调用服务中的refreshTimer（）以启动计时器。我怎么能这样做？

提前致谢！

Answer 1

我使用switchMap取消订阅之前的timer并订阅重新开始的新版本。

private reset$ = new Subject();

initialize(): void {
  this.reset$
    .pipe(
      startWith(void 0),
      switchMap(() => timer(0, 30000)),
    )
    .subscribe(() => this.refresh());
}

refreshTimer(): void {
  this.reset$.next(void 0);
}

startWith运算符需要触发在订阅时创建第一个timer。

Answer 2

您应取消订阅，然后重新订阅计时器可观察

t = timer(0, 30000);
sub: Subscription;

initTimer(): void {
    this.sub && this.sub.unsubscribe();
    this.sub = this.t.subscribe(() => this.refresh());
}

或者您可以只使用一种方法

var urlsToCache = [
  '/',
  '/styles/style.css',
];

Angular 2重置可观察定时器

2 个答案: