使用RxJS的可暂停缓冲区

Question

我正在尝试使用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忽略了即将到来的流量，而其可观察到的开口未发出。

我认为应该启用bufferToggle的情况下绕过autoSave，但是我所有的尝试都失败了。

有什么想法可以实现吗？

Answer 1

我们可以使用bufferToggle(on, off)在自动保存 on 和 off 之间缓冲事件，并打开 off 和使用windowToggle(off, on) on 。然后我们将它们合并在一起：

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)来取消包装缓冲的值。您可能要禁用此特定行，以便从混合了原始值的缓冲区中获取数组。

另外，请查看我的文章“ Pausable Observables in RxJS”以查看更多示例。

希望这会有所帮助