RxJS - 转换运算符 bufferCount

对于 buffercount 运算符，它会收集调用该运算符的可观察对象中的值，并且当 buffercount 中给出的缓冲区大小相匹配时会发出该值。它采用 2 个参数buffersize，第二个是 startBufferEvery，即它会从 startBufferEvery（如果给出）中计数新值，否则会从源可观察对象的开头计数。

语法

bufferCount(bufferSize: number, startBufferEvery: number = null): Observable

参数

bufferSize − 要发出的缓冲区大小。

返回值

将返回一个可观察对象，它将包含一个缓冲值数组。

我们将看到一个 bufferCount() 的工作示例

示例 1

import { fromEvent } from 'rxjs';
import { bufferCount } from 'rxjs/operators';

let btn = document.getElementById("btnclick");

let btn_clicks = fromEvent(btn, 'click');
let buffered_array = btn_clicks.pipe(bufferCount(4));
buffered_array.subscribe(arr => console.log(arr));

在以上示例中，bufferSize 为 4。因此，在点击计数为 4 后，点击事件数组将收集到一个数组中并显示出来。由于我们没有给出 startBufferEvery，因此将从一开始进行计数。

输出

示例 2

import { fromEvent } from 'rxjs';
import { bufferCount } from 'rxjs/operators';

let btn = document.getElementById("btnclick");
let btn_clicks = fromEvent(btn, 'click');
let buffered_array = btn_clicks.pipe(bufferCount(4, 2));
buffered_array.subscribe(arr => console.log(arr));

在此示例中，我们添加了 startBufferEvery，因此在每次点击 2 次后，它将显示 4 次点击事件的缓冲计数。

输出