JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.jsdelivr.net/rxjs/2.2.7/rx.js"></script>
<script src="http://cdn.jsdelivr.net/rxjs/2.2.7/rx.binding.js"></script>
<script src="http://cdn.jsdelivr.net/rxjs/2.2.7/rx.time.js"></script>
<div id="out"></div>
CSS
.proc-1 {
color: #ff6666
}
.proc-2 {
color: #66ff66
}
.proc-3 {
color: #6666ff
}
JavaScript
var output = document.getElementById('out');
function render (x) {
var div = document.createElement('div');
div.innerHTML = '<div class="proc-' + x + '">Process ' + x + '</div>';
output.appendChild(div);
}
var channel = new Rx.BehaviorSubject();
channel.onNext(Rx.Observable.timer(0, 250).map(function () { return 1; }));
channel.onNext(Rx.Observable.timer(0, 1000).map(function () { return 2; }));
channel.onNext(Rx.Observable.timer(0, 1500).map(function () { return 3; }));
var subscription = channel.mergeObservable().bufferWithCount(10, 1).subscribe(
function (buffer) {
output.innerHTML = '';
buffer.reverse().forEach(render);
});