RxJS 5 merge example

RxJS 5 merge

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)
;

// Debounce
// See https://rxjs-dev.firebaseapp.com/api/operators/debounce
// See // See https://rxjs-dev.firebaseapp.com/api/operators/debounceTime
const debounceOb = based.debounceTime(250);

// Throttle
// See https://rxjs-dev.firebaseapp.com/api/operators/throttle
// See https://rxjs-dev.firebaseapp.com/api/operators/throttleTime
const throttleOb = based.throttleTime(250);

// Merge both observables
const merged = debounceOb.merge(throttleOb);

merged
  .distinctUntilChanged()
  .subscribe((value) => {
    const newLiElement = document.createElement('li');
    newLiElement.textContent = value;
    olElement.appendChild(newLiElement);
  })
;