首页 文章

RxJs事件定时器复位

提问于
浏览 次
0

Some context: 我有一个在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秒内不会提取任何数据 .

我认为使用debounce是可行的方法，但是我无法正常工作，并且每次点击事件都会立即获取新数据 .

我已经开始stackblitz demo，如果有人可以取悦一些 .

javascript angular rxjs

1 回答

  • 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

    回复于

相关问题