RxJS 5 bufferTime example

RxJS 5 bufferTime

by Julien Roche

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<input type="text" value="" />
<br />
<ol></ol>

Babel + JSX

// See https://www.learnrxjs.io/learn-rxjs/operators/combination/merge

const olElement = document.querySelector('ol');
const inputElement = document.querySelector('input');

// Based observer:
const based = Rx.Observable
	.fromEvent(inputElement, 'keyup')
  .map((e) => e.target.value)
;

const startTime = (new Date()).getTime();

based
	.bufferTime(1000, null, 5)
  .distinctUntilChanged()
  .subscribe((values) => {
  	if (values.length > 0) {
      const newLiElement = document.createElement('li');
      newLiElement.textContent = values;
      olElement.appendChild(newLiElement);
    }
  })
;