时间戳

首页 > 解决方案 > 使用 RxJS 的可暂停缓冲区

rxjs - 使用 RxJS 的可暂停缓冲区

问题描述

我正在尝试使用 RxJS 流实现可切换的自动保存功能。目标是：

这是我遇到的：

autoSave$ = new BehaviorSubject(true);
change$ = new Subject();

change$.pipe(
  bufferToggle(
    autoSave$.pipe(filter(autoSave => autoSave === false)),
    () => autoSave$.pipe(filter(autoSave => autoSave === true)),
  ),
  concatMap(changes => changes),
  concatMap(change => apiService.patch(change)),
).subscribe(
  () => console.log('Change sent'),
  (error) => console.error(error),
);

感谢bufferToggle，我能够在autoSave关闭时缓冲更改并在重新启用时发送它们。

问题是虽然autoSave启用，但没有任何东西通过。我理解这是因为bufferToggle忽略了流来，而其开放的 observable 没有发出。

我觉得我应该有一个条件来绕过启用的bufferToggle时间autoSave，但我所有的尝试都惨遭失败。

有什么想法可以实现吗？

标签： rxjsrxjs6

解决方案

我们可以在 autosave on和off using之间缓冲事件，并在off和on usingbufferToggle(on, off)之间打开一个过滤窗口。然后我们将它们合并在一起：windowToggle(off, on)

带有 bufferToggle 和 windowToggle 的可暂停缓冲区

const on$ = autoSave$.filter(v=>v);
const off$ = autoSave$.filter(v=>!v);

const output$ =
  Observable.merge(
    changes$
      .bufferToggle(
        off$,
        ()=>on$
      )

    changes$
      .windowToggle(
        on$,
        ()=>off$
      )
  )
  .flatMap(x=>x) // < flattern buffer and window

在https://thinkrx.io/gist/3d5161fc29b8b48194f54032fb6d2363上玩这个例子

*请注意，由于缓冲区将值包装在数组中 - 我flatMap(v=>v)在示例中使用了另一个来解包缓冲值。您可能希望禁用此特定行以从混合了原始值的缓冲区中获取数组。

此外，请查看我的文章“ RxJS 中的可暂停可观察对象”以查看更多示例。

希望这可以帮助

推荐阅读