RxJS 是一个用于异步编程的 JavaScript 库，它可以让我们更轻松地处理诸如 AJAX 调用、事件、定时器等异步数据流。RxJS 也提供了丰富的操作符来处理这些数据流。其中一个非常有用的操作符是 buffer。
什么是 buffer？
Buffer 操作符可以将源 Observable 中的值收集到一个缓存区域中，并在满足某个条件后将这些值作为数组发出。这个条件可以是一个时间间隔、一定数量的值或者另一个 Observable 发出的信号。
下面是一个 buffer 操作符的基本语法：
buffer(bufferBoundaries: Observable<any>): Observable<T[]>
它只有一个参数，即一个 Observable 对象，这个 Observable 对象用来决定何时发出缓存中的数据。当 bufferBoundaries 发出一个值时，buffer 将缓存中的值作为一个数组发出，并清空缓存。
buffer 操作符的用法
按时间间隔缓存
首先我们来看一个按时间间隔缓存的示例。我们可以使用 interval 操作符来创建一个每秒发出一个数字的 Observable 对象，使用 buffer 操作符来按每 5 秒的间隔缓存数据：
import { interval } from 'rxjs';
import { buffer } from 'rxjs/operators';
const source$ = interval(1000);
const buffer$ = source$.pipe(buffer(interval(5000)));
buffer$.subscribe(console.log);当运行这段代码时，我们会得到每 5 秒内的数据作为一个数组输出的结果，例如：
[0, 1, 2, 3, 4] [5, 6, 7, 8, 9] ...
按数量缓存
除了按时间间隔缓存，我们还可以使用 buffer 操作符来按数量缓存。我们可以使用 bufferCount 操作符，它的语法类似于 buffer：
bufferCount(bufferSize: number, startBufferEvery: number = null): OperatorFunction<T, T[]>
第一个参数是每次缓存的值的数量，第二个参数可选，指定每次开始缓存时跳过的值的数量。下面是一个按每 3 个值缓存的示例：
import { of } from 'rxjs';
import { bufferCount } from 'rxjs/operators';
const source$ = of(1, 2, 3, 4, 5, 6);
const buffer$ = source$.pipe(bufferCount(3));
buffer$.subscribe(console.log);当运行这段代码时，我们会得到每 3 个值作为一个数组输出的结果，例如：
[1, 2, 3] [4, 5, 6]
buffer 操作符的高级用法
我们还可以使用 buffer 操作符的高级应用，例如将 bufferBoundaries 指定为另一个 Observable 对象。这个 Observable 对象可以是任何我们想要告诉 buffer 操作符何时发送缓存数据的东西，例如一个按钮点击事件或者一个鼠标移动事件。
下面是一个示例，我们可以创建一个点击按钮，当点击按钮 5 次后，将这 5 次点击事件作为一个数组输出。这里我们首先使用 fromEvent 操作符创建一个 Observable 对象，监听 button 的 click 事件。然后创建了一个输入框，用来记录点击次数，每次点击时将点击次数加 1，当点击次数达到 5 时，将点击次数清零，并发出一个信号：
<button id="mybutton">Click me</button> <input type="text" id="input">
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ------ - ---- -----------------
----- ------ - ------------------------------------
----- ----- - ---------------------------------
----- ------- - ----------------- ---------
----- ------- - ---------------- --------
------
--------- -- --------------------- --- ---
------ -- ----------- - ----
--
----- ------- - ------------------------------
-------------------------------当运行这段代码时，我们会在按钮点击 5 次后得到一个包含这 5 次点击事件的数组的结果。
总结
buffer 操作符是一个非常实用的 RxJS 操作符，可以方便地处理一些有规律的数据流，例如定时器、鼠标事件、按钮点击事件等。我们可以通过定制 bufferBoundaries，来控制 buffer 缓存的数据何时被发送。希望本文能够帮助读者更好地理解 buffer 操作符并在实战中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec94bdf6b2d6eab36e2fa6