Rx.JS Simple Demo

by Santiago J

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>
<h4>Input</h4>
<input id="input">
<h4>Output</h4>
<textarea id="output"></textarea>

CSS

textarea {
  display: block;
  width: 400px;
  height: 300px;
}

JavaScript

function request(payload) {
	return new Promise(function(res, rej) {
  	var delay = Math.floor(1000 * Math.random());
  	window.setTimeout(function() {
    	res('r:' + payload);
    }, delay);
  });
}

// ----------------------------------------------

var input = document.querySelector('#input');
var output = document.querySelector('#output');

/*

Rx.Observable
	.fromEvent(input, 'input', e => e.target.value)
	.forEach(data => output.value += data + '\n')

//*/

/*

Rx.Observable
	.fromEvent(input, 'input', e => e.target.value)
	.map(data => request(data))
	.forEach(req => req.then(data => output.value += data + '\n'))

//*/

//*

Rx.Observable
	.fromEvent(input, 'input', e => e.target.value)
	.flatMapLatest(data => request(data))
	.forEach(data => output.value += data + '\n')

//*/