rxjs 轮询定时器数据并在手动刷新时重置定时器

Question

我在相关应用程序中使用以下库:Angular 4.x、ngrx 4.x、rxjs 5.4.x

我有一个 api，我需要每 5 分钟轮询一次。用户还可以手动刷新数据。该数据存储在 ngrx 存储中。我正在使用 ngrx 效果，因此通过分派(dispatch)“FETCH”类型的操作来检索数据。

我想设置一个 rxjs 流，它将“FETCH”操作分派(dispatch)到 ngrx 存储。这将是一个滑动的 5 分钟计时器，当用户手动更新商店时重置。流最初应该在订阅时发出一个值。

我不确定如何重置计时器。在普通的 javascript 中，我会做类似下面的事情:

console.clear();
let timer;
let counter = 0;

function fetch() {
  console.log('fetch', counter++);
  poll();
}

function poll() {
  if (timer != null) {
    window.clearTimeout(timer);
  }
  timer = window.setTimeout(() => {
    console.log('poll');
    fetch();
  }, 5000);
}

function manualGet() {
  console.log('manual');
  fetch();
}

fetch();

<button onClick="manualGet()">Get Data</button>

问题:当另一个流再次像示例一样发出时，如何在重置的间隔上发出？

Answer 1

您需要两个组件到您的流中——一个计时器和一些用户输入。因此，让我们从用户输入开始。我假设有一些可以点击的按钮:

const userInput$ = Observable.fromEvent(button, 'click');

现在我们要启动一个计时器，它会在每次 userInput$ 发出时重置。我们可以使用

userInput$.switchMap(() => Observable.timer(0, 5000));

但是，我们还希望无需用户先单击按钮即可启动此流。但这也不是问题:

userInput$.startWith(null);

现在我们把它们放在一起:

Observable.fromEvent(button, 'click')
    .startWith(null)
    .switchMap(() => Observable.timer(0, 5000))
    .subscribe(() => dispatchFetch());

请注意，我正在按照您使用 5 秒计时器的示例进行操作，而不是使用 5 分钟计时器(您在问题中提到过)。