Reference

RxJS

    RxJS

    buffer

    buffer collects values emitted from the source observable into cache without passing them down to an observer until the notifier observable emits (buffering). The buffer then sends the cached values as a group, resets and starts buffering again until the provided observable emits once more.

    One interesting behavior of the buffer operator is that it can send empty set of values to the observer if the notifier observable emits a value and the cache is empty.

    The operator works in the following way:

    1. Subscribe to a source observable
    2. Subscribe to a notifier observable
    3. When a new value arrives from a source observable, put it in a cache
    4. When a notifier observable emits a value, send all values from the cache to the observer, even if the cache is empty
    5. Once the source or the notifier observable completes, send the complete notification to the observer
    6. If any of the source observables throws an error, send the error notification to the observer.

    buffer completes if either source observable or notifier observable completes.

    The following diagram demonstrates this sequence of steps:

    Progress: NaN%

    Usage
    Link to this section

    buffer is often used when the batching technique is required. For example, sometimes you need to repeatedly perform a very expensive operation within a very small time frame, such as re-rendering a DOM tree on updates from a stream, batching can help collect updates and render them at once.

    Here’s an example of using buffer to emit array of most recent interval events on every click:

    <>Copy
    const clicks = fromEvent(document, 'click'); const intervalEvents = interval(1000); const buffered = intervalEvents.pipe(buffer(clicks)); buffered.subscribe(x => console.log(x));

    Playground
    Link to this section

    Additional resources
    Link to this section

    See also
    Link to this section

    Next

    Introduction