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

过滤器是你的朋友。在组件上有一个 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