Example 1: Using buffer to recognize double clicks
( StackBlitz)
// RxJS v6+import { fromEvent } from 'rxjs';import { buffer, filter, throttleTime } from 'rxjs/operators';// streamsconst clicks$ = fromEvent(document, 'click');/*Collect clicks that occur, after 250ms emit array of clicks*/clicks$.pipe(buffer(clicks$.pipe(throttleTime(250))),// if array is greater than 1, double click occuredfilter(clickArray => clickArray.length > 1)).subscribe(() => console.log('Double Click!'));
Example 2: Buffer until document click
( StackBlitz | jsBin | jsFiddle )
// RxJS v6+import { interval, fromEvent } from 'rxjs';import { buffer } from 'rxjs/operators';//Create an observable that emits a value every secondconst myInterval = interval(1000);//Create an observable that emits every time document is clickedconst bufferBy = fromEvent(document, 'click');/*Collect all values emitted by our interval observable until we click document. This will cause the bufferBy Observable to emit a value, satisfying the buffer. Pass us all collected values since last buffer as an array.*/const myBufferedInterval = myInterval.pipe(buffer(bufferBy));//Print values to console//ex. output: [1,2,3] ... [4,5,6,7,8]const subscribe = myBufferedInterval.subscribe(val =>console.log(' Buffered Values:', val));
buffer 📰 - Official
docs
Transformation operator: buffer
🎥 💵 - André Staltz
📁 Source Code: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/buffer.ts