[RxJS] Transformation operator: buffer, bufferCount, bufferTime

Posted 2020-07-14 Answer1215

This lesson will teach you about another horizontal combination operator: buffer and its variants. Buffer groups consecutive values together, emitting the output as an array. The buffer variants and their arguments allow to specify when to close the buffers.

 

buffer(close observable): According to another observalbe to group items.

var foo = Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘)
  .zip(Rx.Observable.interval(600).take(5), (x,y) => x);
var bar = Rx.Observable.interval(900).take(3);

/*
-----h-----e-----l-----l-----o|       (foo)
--------0--------1--------2|          (bar)

        buffer(bar)

--------h--------e--------ll|
*/

var result = foo.buffer(bar);

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*

"next h"
"next e"
"next l,l"
"done"
  
  */

 

bufferTime(number): 

var foo = Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘)
  .zip(Rx.Observable.interval(600).take(5), (x,y) => x);

/*
-----h-----e-----l-----l-----o|       (foo)
--------x--------x--------x|          (900ms)

        bufferTime(900)

--------h--------e--------ll|
*/

var result = foo.bufferTime(900);

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*

"next h"
"next e"
"next l,l"
"done"
  
  */

 

bufferCount(number):

var foo = Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘)
  .zip(Rx.Observable.interval(600).take(5), (x,y) => x);

/*
-----h-----e-----l-----l-----o|       (foo)

        bufferCount(2)

----------([h,e])------([l,l])([o|])l
*/

var result = foo.bufferCount(2);

result.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*

"next h,e"
"next l,l"
"next o"
"done"
  
  */