buffer 相关操作符主要用于缓存数据源发射的数据, 到了一定的时候将缓存的数据组成数组一并发射出来. 所以他们之间的区别就是什么时候发射数据.
buffer
缓存外部数据源, 直到内部数据源发射数据后将之前缓存的数据组成数组发射出来.
时间点: 内部源发射数据时, 所以参数是一个源
案例: 外部数据源是 interval 数据源, 每秒发射一个递增数字 (0,1,2,3...), 但不希望它直接发射出来, 而是缓存着, 点击页面后才发射出来
- import { interval, fromEvent } from 'rxjs';
- import { buffer } from "rxjs/operators";
- interval(1000).pipe(
- buffer(fromEvent(document,"click"))
- ).subscribe(x=>console.log(x))
- bufferCount
时间点: 缓存的数据达到一定量时, 所以参数是一个数字
案例: 缓存页面点击事件, 当达到 10 次的时候一并发射出去
- import { fromEvent } from 'rxjs';
- import { bufferCount } from "rxjs/operators";
- fromEvent(document,"click").pipe(
- bufferCount(10)
- ).subscribe(x=>console.log(x))
- bufferTime
时间点: 固定时间间隔发射一次, 所以参数是一个数字, 单位毫秒
案例: 缓存页面点击事件, 3 秒发射一次
- import { fromEvent } from 'rxjs';
- import { bufferTime } from "rxjs/operators";
- fromEvent(document,"click").pipe(
- bufferTime(3000)
- ).subscribe(x=>console.log(x))
- bufferWhen
这个比较难以理解, 这个接收的参数是一个无参函数, 函数返回值是一个源, 当源发射数据时将外部源缓存的数据发射出来
案例: 随机 1-5 秒将缓存的数据发射出来
- import { fromEvent, interval } from 'rxjs';
- import { bufferWhen } from "rxjs/operators";
- fromEvent(document, "click").pipe(
- bufferWhen(() => interval(1000 + Math.random() * 4000))
- ).subscribe(x => console.log(x))
解释: 这里 bufferWhen 接收的是一个无参函数, 无参函数返回值是一个 interval 源, 只是源的时间是一个随机值. 所以随机 1-5 秒, 这个新产生的 interval 源会发射第一个数据, 这个时间点就是外部源缓存数据发射出来的时间点. 当 interval 源发射完数据时, 这个源就没用了, 无参函数再次产生一个新的 interval, 然后重复上述步骤.
- bufferToggle
- // TODO
来源: http://www.jianshu.com/p/2ebd851a3b24