缘起
RxJS 是一个被广泛使用的 JavaScript 函数响应式编程库。它的丰富运算符集合和高效的编程模型使得它在处理异步事件时很优秀。在 RxJS 中，buffer 操作符可以在许多场景中提供便捷的函数式编程解决方案。
介绍
buffer 操作符的作用是将流中的元素收集到缓冲区中，并在缓冲区的容量达到预设的值或在特定的时间间隔内发出缓冲区中的所有元素。它在处理异步事件时非常有用，例如，将异步 HTTP 请求缓存，以免重复发送 HTTP 请求。
API
RxJS 的 buffer 操作符有两个版本：buffer 和 bufferTime。它们的 API 如下所示：
Observable.prototype.buffer(bufferBoundaries: Observable<any>): Observable<T[]> Observable.prototype.bufferTime(bufferTimeSpan: number, bufferCreationInterval: number, maxBufferSize: number, scheduler?: Scheduler): Observable<T[]>
buffer 操作符有一个参数 bufferBoundaries，它是一个 Observable，表示缓冲区开启和关闭的边界，通常是指一个开关 Observable。当 bufferBoundaries 发出一个值时，当前的缓冲区就会被释放，并将所有元素作为一个数组发射。如果多个缓冲区同时被打开，就会合并这些缓冲区发出的元素。注意，当一个新的缓冲区被开启时，之前的元素不会被释放。这类似于一个滑动窗口，它可以很容易地在数据流中移动。
bufferTime 操作符使用时间参数，其中 bufferTimeSpan 表示缓冲时间，bufferCreationInterval 表示缓冲区间隔时间，maxBufferSize 表示缓冲区的容量，scheduler 参数是一个可选的参数，用于调度缓冲区发出的元素。
示例
下面我们来看两个使用示例，它们分别使用 buffer 和 bufferTime 操作符。
buffer 示例
import { fromEvent, interval } from 'rxjs';
import { buffer } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const buffered = clicks.pipe(buffer(interval(1000)));
buffered.subscribe(x => console.log(x));这个示例使用 fromEvent 将 click 事件变成一个流，在传统的监听器模式下，每个 click 事件都会触发回调函数，但是在 RxJS 中，clicks 流会持续发射每个 click 事件作为一个元素。
buffer 操作的参数是 interval 操作符，它发出一个数字序列，以指定什么时候要释放当前缓冲区。buffer 操作符在每个开关事件（即 interval 操作符）到达时发射缓冲区。
注意，clicks 流中的每个元素都会被添加到当前缓冲区中，直到下一个点击事件或超时事件到达时，缓冲区才会被释放。如果在超时发生之前没有新的缓冲区开启，那么在超时到达时空缓冲区也会被释放。
bufferTime 示例
import { interval } from 'rxjs';
import { bufferTime } from 'rxjs/operators';
const buffered = interval(500).pipe(bufferTime(2000, 1000, 2));
buffered.subscribe(x => console.log(x));这个示例使用 interval 操作符创建一个只发射数字序列的流。bufferTime 操作符的第一个参数是缓冲时间，意味着当两次发射之间的时间大于 2000ms 时，缓冲区就会被释放。
第二个参数是缓冲区间隔时间，它控制了何时会新建一个缓冲区。如果第二个参数没有指定，那么新的缓冲区会在前一个缓冲区被释放时创建。
第三个参数是缓冲区的最大容量，它表示当达到这个容量时，缓冲区就会被释放。
总结
RxJS 的 buffer 操作符提供一种有效的方式来缓冲和处理异步事件。buffer 和 bufferTime 操作符的区别在于控制缓冲区释放的条件，一个是信号事件，一个是时间间隔。在实际应用中，我们可以根据具体场景来选择使用哪个操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d321e2b5eee0b525aa74a4