RxJS：debounceTime 返回所有值答案

【问题标题】：RxJS: debounceTime return all valuesRxJS：debounceTime 返回所有值
【发布时间】：2017-09-07 03:46:06
【问题描述】：

如果没有其他事件发生，是否可以延迟运行序列并一次返回所有值？

我需要某种debounceTime func，但这会返回所有值。

【问题讨论】：

【解决方案1】：

如果我理解正确，您需要一个操作符来缓冲事件，直到在一段时间内没有事件发生，然后重复所有缓冲的事件。我会试试这个：

将此新运算符设置为 Observable 原型：

function bufferedDebounceTime(time) {
    return Observable.create(subscriber => {
        let buffer = [];
        return this.do(x => buffer.push(x))
            .debounceTime(time)
            .flatMap(() => buffer)
            .do(() => buffer = [])
            .subscribe(
                value => subscriber.next(value),
                err => subscriber.error(err),
                () => subscriber.complete()
            );
    });
}

Observable.prototype.bufferedDebounceTime = bufferedDebounceTime;

然后将其用作运算符：

yourSourceObservable.bufferedDebounceTime(1000).subscribe(...)

【讨论】：

【解决方案2】：

编辑

bufferTime 确实就像一个永远的间隔，所以不推荐。正如 Jørgen Tvedt 评论的那样，debounceTime + buffer 这就是您要找的东西。

但是，因为这是一个非常有用的运算符。我创建了我的自定义一个，它使一切变得更容易，我称之为 bufferDebounce

我将它作为 Typescript 中的 OperatorFunction 来强制沿管道进行类型推断：

type BufferDebounce = <T>(debounce: number) => OperatorFunction<T, T[]>;

const bufferDebounce: BufferDebounce = debounce => source =>
  new Observable(observer => 
    source.pipe(buffer(source.pipe(debounceTime(debounce)))).subscribe({
      next(x) {
        observer.next(x);
      },
      error(err) {
        observer.error(err);
      },
      complete() {
        observer.complete();
      },
  })
);

您可以在这个工作示例中自己测试它https://stackblitz.com/edit/rxjs6-buffer-debounce

以前的答案

使用 RXJS 6+，您可以非常轻松地做到这一点。

正如 ZahiC 提到的，答案是使用缓冲区，但具体而言，您可以使用 bufferTime How to use bufferTime 完成所有这些操作

所以无论您的source 在哪里（如可观察到的那样），您都可以：

    // This will capture all responses, and return it in an Array every 2 secs
    const example = source.pipe(bufferTime(2000));

【讨论】：

我认为这不会完全相同，因为 bufferTime 似乎定期发出，与接收到的事件无关。在最后一个事件之后的某个时间发出去抖动。

【解决方案3】：

buffer 和debunceTime 可以一起使用来实现这个目标。看看这篇文章：

https://dev.to/datadeer/debounced-aggregated-buffered-actions-with-rxjs-6-3koa

【讨论】：

我使用自定义运算符的方法的工作示例编辑了我的答案，以使其更可重用。顺便说一句，好点。