RxJs таймер сбрасывается на событие

Question

Некоторый контекст: У меня есть приложение, встроенное в Angular 6, которое имеет интерактивную панель мониторинга с данными, которые обновляются каждые 60 секунд с использованием интервала RxJS

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 , если кто-нибудь может, пожалуйста, пролить немного света.

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