时间戳

首页 > 解决方案 > 在自动保存场景中以哪个顺序使用哪些 rxjs 运算符

angular - 在自动保存场景中以哪个顺序使用哪些 rxjs 运算符

问题描述

我想在 Angular 中使用 RxJS 自动保存表单。表单更改时会发出一个事件

这是场景：

  1. 当表单输出发生变化，但在接下来的 10 秒内没有再次变化时，它应该发出一个保存事件。

  2. 仅当表单每 10 秒更改一次以上（至少 30 秒）时，它也应该发出一个保存事件。

首先我可以使用去抖动，但我如何将它与我的第二条规则结合起来？

标签： angularrxjs

解决方案

您需要将流分成两个流。

const source = fromEvent(document.getElementById("text"), "input");

source
  .pipe(debounceTime(10 * 1000))
  .subscribe(() => console.log("saved after typing!"));

source
  .pipe(
    auditTime(10 * 1000)
  )
  .subscribe(() => console.log("saved while typing!"));

在第一种情况下，正如您在问题中所写，使用 debounceTime 值将在用户完成编辑表单/输入后 10 秒发出。在第二种情况下，每 10 秒 auditTime 将检查是否有任何新值。如果有，则将发出值。在回调中，您可以重用负责从表单保存数据的相同函数。您可以在 stackblitz 上的这个演示中尝试它：

https://stackblitz.com/edit/rxjs-jj3kot?file=index.ts

我只是将演示中的时间更改为 1 秒，以便更容易在控制台中检查结果。

边注：

这是一个简单的 JS 演示。如果您开发 Angular 应用程序，您应该避免使用 getElementById 获取元素。而不是直接引用模板：https ://angular.io/api/core/ViewChild

编辑：

根据 OP 评论，我已经稍微改变了实现。我合并了两个 observables 并使用 distinctUntilChanged 运算符来避免两次发出相同的值。stackblitz 中的 Demo 也发生了变化

const afterTyping = source.pipe(debounceTime(1000));

const whileTyping = source.pipe(auditTime(1000));

merge(whileTyping, afterTyping)
  .pipe(distinctUntilChanged())
  .subscribe(console.log);

推荐阅读