为什么我要使用 RxJS 的 interval() 或 timer() 轮询而不是 window.setInterval()？

Question

用例： 每分钟（60000 毫秒）调用一个函数，该函数调度存储操作以获取项目的lastUpdated 状态，在响应和过滤后，更新存储，并读取更新的存储作为可观察的并显示在视图中）。只要网络应用程序处于打开状态（无限期地），这种情况就需要发生。

目前，我正在使用这个：

this.refreshDate = window.setInterval(
  () => this.store.dispatch(new FetchLastUpdate())
, 60000);

当视图被销毁/卸载时，我删除了间隔：

if (this.refreshDate) {
  clearInterval(this.refreshDate);
}

这是高效/有效，还是很麻烦？

我为什么要使用 RxJS 轮询策略，例如：

interval(60000)
  .pipe(
    startWith(0),
    switchMap(() => this.store.dispatch(new FetchLastUpdate()))
   );

或者

timer(0, 60000)
  .pipe(
    switchMap(() => this.store.dispatch(new FetchLastUpdate()))
  );

---

TL;DR: window.setInterval() 与 RxJS timer()/interval()

---

结论/答案（便于研究）：

使用 RxJS 函数设置间隔或执行轮询有很大的好处，这些好处在 selected answer 和 cmets 中都有解释，但得出的结论是（通过 cmets 中的讨论）对于非常简单的要求在本文开头的“用例”部分定义的，没有必要使用 RxJS，事实上如果你在程序的任何其他部分没有使用 RxJS，请不要导入它只是为了这个，但就我而言，我已经在其他地方导入并使用了 RxJS。

Answer 1

RxJS 的优势：

懒惰

你可以创建你的 Observables，直到你调用 subscribe 之前什么都没有发生。 Observable = 纯函数。这为您提供了更多的控制权、更容易的推理并允许下一点......

可组合性

您可以将interval/timer 与其他operators 以统一的方式非常容易地组合创建自定义逻辑 - 例如您可以map、repeat、retry、take...等see all operators

错误处理

如果发生错误，您有责任致电clearTimeout/clearInterval - Observables 正在为您处理此问题。导致更简洁的代码和更少的内存泄漏错误。

当然，你用 Observables 做的任何事情你也可以不用 Observables 做——但这不是重点。 Observables 让您的生活更轻松。

---

另请注意，interval/timer 不是用于轮询的可观察工厂，因为它们不会“等待”您的异步操作完成（您最终可能会遇到多个异步调用相互运行）。为此，我倾向于像这样使用defer 和repeatWhen：

defer(() => doAsyncAction())
  .pipe(
    repeatWhen(notifications => notifications.pipe(delay(1234)))
  );

Answer 2

window.setInterval 不关心你的回调状态，尽管过去回调的执行状态如何，它都会在给定的时间间隔执行，让它停止和跳过的唯一方法是清除间隔或重新初始化它。

另一方面，基于 RxJS Observable 的解决方案（interval，timer）允许您使用管道条件运算符（例如takeWhile，skipWhile），它允许您添加停止或实现停止-只需翻转一个布尔标志即可启动逻辑，而不是添加清除间隔然后重新创建它的复杂逻辑。

它们是可观察的，您可以在整个应用程序中监听它们，并附加任意数量的监听器。

错误处理也更好，您订阅所有成功，并在 catch 回调中处理所有内容。