RxJS 是一个用于异步编程的 JavaScript 库，它可以让我们更轻松地处理诸如 AJAX 调用、事件、定时器等异步数据流。RxJS 也提供了丰富的操作符来处理这些数据流。其中一个非常有用的操作符是 buffer。
什么是 buffer？
Buffer 操作符可以将源 Observable 中的值收集到一个缓存区域中，并在满足某个条件后将这些值作为数组发出。这个条件可以是一个时间间隔、一定数量的值或者另一个 Observable 发出的信号。
下面是一个 buffer 操作符的基本语法：
------------------------ ----------------- ---------------
它只有一个参数，即一个 Observable 对象，这个 Observable 对象用来决定何时发出缓存中的数据。当 bufferBoundaries 发出一个值时，buffer 将缓存中的值作为一个数组发出，并清空缓存。
buffer 操作符的用法
按时间间隔缓存
首先我们来看一个按时间间隔缓存的示例。我们可以使用 interval 操作符来创建一个每秒发出一个数字的 Observable 对象，使用 buffer 操作符来按每 5 秒的间隔缓存数据：
------ - -------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------- - --------------- ----- ------- - ------------------------------------- -------------------------------
当运行这段代码时，我们会得到每 5 秒内的数据作为一个数组输出的结果，例如：
--- -- -- -- -- --- -- -- -- -- ---
按数量缓存
除了按时间间隔缓存，我们还可以使用 buffer 操作符来按数量缓存。我们可以使用 bufferCount 操作符，它的语法类似于 buffer：
----------------------- ------- ----------------- ------ - ------ ------------------- ----
第一个参数是每次缓存的值的数量，第二个参数可选，指定每次开始缓存时跳过的值的数量。下面是一个按每 3 个值缓存的示例：
------ - -- - ---- ------- ------ - ----------- - ---- ----------------- ----- ------- - ----- -- -- -- -- --- ----- ------- - ----------------------------- -------------------------------
当运行这段代码时，我们会得到每 3 个值作为一个数组输出的结果，例如：
--- -- -- --- -- --
buffer 操作符的高级用法
我们还可以使用 buffer 操作符的高级应用，例如将 bufferBoundaries 指定为另一个 Observable 对象。这个 Observable 对象可以是任何我们想要告诉 buffer 操作符何时发送缓存数据的东西，例如一个按钮点击事件或者一个鼠标移动事件。
下面是一个示例，我们可以创建一个点击按钮，当点击按钮 5 次后，将这 5 次点击事件作为一个数组输出。这里我们首先使用 fromEvent 操作符创建一个 Observable 对象，监听 button 的 click 事件。然后创建了一个输入框，用来记录点击次数，每次点击时将点击次数加 1，当点击次数达到 5 时，将点击次数清零，并发出一个信号：
------- ------------------- ----------- ------ ----------- -----------
------ - --------- - ---- -------
------ - ------ - ---- -----------------
----- ------ - ------------------------------------
----- ----- - ---------------------------------
----- ------- - ----------------- ---------
----- ------- - ---------------- --------
------
--------- -- --------------------- --- ---
------ -- ----------- - ----
--
----- ------- - ------------------------------
-------------------------------当运行这段代码时，我们会在按钮点击 5 次后得到一个包含这 5 次点击事件的数组的结果。
总结
buffer 操作符是一个非常实用的 RxJS 操作符，可以方便地处理一些有规律的数据流，例如定时器、鼠标事件、按钮点击事件等。我们可以通过定制 bufferBoundaries，来控制 buffer 缓存的数据何时被发送。希望本文能够帮助读者更好地理解 buffer 操作符并在实战中应用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ec94bdf6b2d6eab36e2fa6