javascript - RxJs 定时器在事件发生时重置

Question

一些背景:我有一个用 Angular 6 构建的应用程序，它有一个交互式仪表板，其中的数据使用 RxJS 间隔每 60 秒更新一次

ngOnInit() {
  this.poller = this.getDataPoller().subscribe(data => {
    // update the dashboard charts
  });
}

getDataPoller() {
  return interval(60000)
    .pipe(
      startWith(0),
      switchMap(() => this.http.get(url))
    );
}

用户可以通过深入查看饼图等与仪表板进行交互，但每次刷新数据时，仪表板图表都会重新绘制。我想保留此功能，以便在某些图表之后没有发生任何事件时重新绘制图表

但是当用户与图表交互(即点击事件)时，我希望计时器在每次点击时重置，以便在最后一次点击事件后 60 秒之前不会获取数据。

我认为使用去抖是一种可行的方法，但我无法让它正常工作，并且每次点击事件时，它都会立即获取新数据。

我已经启动了 stackblitz demo如果有人可以请透露一些信息。

Answer 1

过滤器是你的 friend 。组件上有一个属性lastInteraction，每次交互时该属性都会设置为当前时间。

this.lastInteraction = new Date();

并在 getDataPoller 过滤器的管道中，根据已定义的不活动期是否已过

startWith(0),
filter(() => (new Date().getTime() - this.lastInteraction.getTime()) > this.definedInactivityPeriod)

https://stackblitz.com/edit/angular-rxjs-interval-debounce-cfw6at