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次点击事件的缓冲区计数。