Categories: RxJS教程

RxJS:转换运算符bufferCount

对于buffercount运算符,它将从调用它的可观察对象收集值,并在给buffercount的缓冲区大小匹配时发出相同的值。它使用2个参数buffersize,第二个参数是startBufferEvery,即如果给定的话,它将从startBufferEvery计数新值,否则将从源的开始处计数。

语法

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

参量

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

返回值

将返回一个observable,它将具有一个缓冲值数组。

我们将看到一个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个单击事件的缓冲区计数。

输出

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

聊聊vue3中的defineProps

在Vue 3中,defineP…

6 天 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

1 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

2 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

3 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

4 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

1 月 ago