事件發生時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演示 。

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