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

事件发生时RxJs定时器复位

1 个答案: