JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://dl.dropboxusercontent.com/u/10929935/rx.js"></script>
<script src="https://dl.dropboxusercontent.com/u/10929935/rx.binding.js"></script>
<script src="https://dl.dropboxusercontent.com/u/10929935/rx.time.js"></script>
<script src="https://dl.dropboxusercontent.com/u/10929935/rx.dom.js"></script>
<div id="container"></div>
CSS
.proc1 {
color: red;
}
.proc2 {
color: blue;
}
.proc3 {
color: green;
}
JavaScript
var container = document.getElementById('container');
function add(acc, x) {
return acc + x;
}
function selectProcess(x) {
return '<div class="proc'+x+'">Process '+x+'</div>';
}
// Create three "channels"
var c1 = Rx.Observable.interval(250).map(selectProcess.bind(null, 1)),
c2 = Rx.Observable.interval(1000).map(selectProcess.bind(null, 2)),
c3 = Rx.Observable.interval(1500).map(selectProcess.bind(null, 3));
// Merge them all together
var channels = Rx.Observable.merge(c1, c2, c3);
// Do a rolling window of 10 at a time
channels.bufferWithCount(10, 1).subscribe(function(buffer) {
container.innerHTML = buffer.reduce(add, ' x ');
});