W3cubDocs

/RxJS

bufferWhen

function stable

Buffers the source Observable values, using a factory function of closing Observables to determine when to close, emit, and reset the buffer.

`bufferWhen<T>(closingSelector: () => Observable<any>): OperatorFunction<T, T[]>`

Parameters

closingSelector

A function that takes no arguments and returns an Observable that signals buffer closure.

Returns

OperatorFunction<T, T[]>: An observable of arrays of buffered values.

Description

Collects values from the past as an array. When it starts collecting values, it calls a function that returns an Observable that tells when to close the buffer and restart collecting.

bufferWhen marble diagram

Opens a buffer immediately, then closes the buffer when the observable returned by calling closingSelector function emits a value. When it closes the buffer, it immediately opens a new buffer and repeats the process.

Example

Emit an array of the last clicks every [1-5] random seconds

import { fromEvent, interval } from 'rxjs';
import { bufferWhen } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const buffered = clicks.pipe(bufferWhen(() =>
  interval(1000 + Math.random() * 4000)
));
buffered.subscribe(x => console.log(x));