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');
let previousValue = '';

function callback(value) {
	if (previousValue !== value) {
  	previousValue = value;
    
    const newLiElement = document.createElement('li');
    newLiElement.textContent = value;
    olElement.appendChild(newLiElement);
  }
}

const debounced = _.debounce(callback, 500);
const throttled = _.throttle(callback, 150);

function combined(value) {
	debounced(value);
  throttled(value);
}

inputElement.addEventListener(
	'keypress',
  (event) => combined(event.target.value),
  false
);