RxJS bufferToggle() Transformation Operator

The RxJS bufferToggle() operator is a transformation operator that takes two arguments, openings and closingSelector. Here, the opening arguments specify a subscribable or a promise to start the buffer. The second argument, closingSelector, specifies a subscribable or promise that indicates closing the buffer and emitting the values collected.

The RxJS bufferToggle() buffers the source Observable values starting from the emission of openings and ending when the closingSelector emits. The values emitted by the originating Observable is buffered until the closingSelector stop the emitting values from the originating Observable.

You can deploy this example by using a button.

Here, we can buffer the mouse click events on a button and emit the MouseEvent objects buffered according to the closingSelector.

Syntax:

bufferToggle(openings: SubscribableOrPromise, closingSelector: SubscribableOrPromise): Observable 

Parameter Explanation

openings: It specifies a Subscribable or Promise of notifications to start new buffers.

closingSelector: It specifies a function that takes the value emitted by the openings observable and returns a Subscribable or Promise, which signals that the associated buffer should be emitted and cleared when it emits.

Return value

The bufferToggle () operator's return value is observable that will have an array of buffered values.

Let us see some examples of bufferToggle () operator to understand it clearly.

Example 1 (Toggle buffer on/off in a time interval)

import { interval } from 'rxjs';
import { bufferToggle } from 'rxjs/operators';
//emit value every second
const sourceInterval = interval(1000);
//start first buffer after 5s, and every 5s after
const startInterval = interval(5000);
//emit value after 3s, closing corresponding buffer
const closingInterval = val => {
  console.log(`Value ${val} emitted, starting buffer! Closing in 3s!`);
  return interval(3000);
};
//every 5s a new buffer will start, collecting emitted values for 3s then emitting buffered values
const bufferToggleInterval = sourceInterval.pipe(
  bufferToggle(startInterval, closingInterval)
);
const subscribe = bufferToggleInterval.subscribe(val =>
  console.log('Emitted Buffer:', val)
);

Output:

After executing the above example, you will see the following result:

RxJS bufferToggle() Transformation Operator

Example 2 (Toggle buffer on/off when mouse drag or down/up)

import { fromEvent, pipe } from 'rxjs';
import { bufferToggle, map } from 'rxjs/operators';
console.clear();
const getXYCoordinates = pipe(
  map<[MouseEvent], {}>(e => e.map(v => ({ x: v.clientX, y: v.clientY }))),
  map(e => JSON.stringify(e))
)
const buffer = pipe(
  bufferToggle(
    fromEvent(document, 'mousedown'),
    _ => fromEvent(document, 'mouseup')
  )
)
fromEvent(document, 'mousemove')
  .pipe(
    buffer,
    getXYCoordinates
  )
  .subscribe(console.log)

Output:

After executing the above example, you see the following result when you drag your mouse or up/down.