如何根据rxjs中的缓冲区内容缓冲一个observable？

Question

I would like to flush a buffered observable based on the content of the buffer, but how to accomplish this? A simplified example of what I want to do:

observable.buffer(() => {
  // Filter based on the buffer content.
  // Assuming an observable here because buffer()
  // needs to return an observable.
  return buffer.filter(...);
})

Here is more specifically what I am trying to do with key events (bin here ):

const handledKeySequences = ['1|2']

// Mock for document keydown event
keyCodes = Rx.Observable.from([1,2,3,4])

keyCodes
  .buffer(() => {
    /*
      The following doesn't work because it needs to be an
      observable, but how to observe what is in the buffer?
      Also would like to not duplicate the join and includes
      if possible
      return function (buffer) {
        return handledKeySequences.includes(buffer.join('|'));
      };
    */

    // Returning an empty subject to flush the buffer
    // every time to prevent an error, but this is not
    // what I want.
    return new Rx.Subject();
  })
  .map((buffer) => {
    return buffer.join('|')
  })
  .filter((sequenceId) => {
    return handledKeySequences.includes(sequenceId);
  })
  .subscribe((sequenceId) => {
    // Expecting to be called once with 1|2
    console.log("HANDLING", sequenceId)
  })

I feel like my approach is wrong, but I can't figure out what the right approach would be. I've tried using scan , but that scans all the events in the observable, which is not what I want.

Thanks for any help!

Answer 1

This should be doable with bufferWithCount :

const handledKeySequences = ['1|2']

// Mock for document keydown event
keyCodes = Rx.Observable.from([0,1,2,3,4]);

const buffer$ = keyCodes
  .bufferWithCount(2, 1)  // first param = longest possible sequence, second param = param1 - 1
  .do(console.log)
  .map((buffer) => {
    return buffer.join('|')
  })
  .filter((sequenceId) => {
    return handledKeySequences.includes(sequenceId);

  });

  buffer$.subscribe((sequenceId) => {
    console.log("HANDLING", sequenceId)
  });

See live here .

Also have a look at this question.

Answer 2

It seems that this functionality is not currently available in Rxjs, so as suggested by @olsn I wrote a custom operator that works by passing a function to tell when to flush the buffer:

(function() {

  // Buffer with function support.
  function bufferWithContent(bufferFn) {
    let buffer = [];

    return this.flatMap(item => {
      buffer.push(item);
      if (bufferFn(buffer)) {
        // Flush buffer and return mapped.
        let result = Rx.Observable.just(buffer);
        buffer = [];
      } else {
        // Return empty and retain buffer.
        let result = Rx.Observable.empty();
      }
      return result;
    });
  }

  Rx.Observable.prototype.bufferWithContent = bufferWithContent;

})();

I also opened an issue here that proposes adding this functionality.