<div class="container">
		<div class="page-header">
				<h1>RxJS glitch fix demo</h1>
				<ul id="list"></ul>
		</div>
</div>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.3/Rx.js"></script>
function log(text) {
	const li = document.createElement("li");
	li.innerHTML = JSON.stringify(text, null, "  ");
	list.appendChild(li);
}

/*
	computes x -> z where z=[x,y], y=[x,x] 

				  x
         | \
				 | [,]
			   |  y
				 | /
				 [,]
				  |
          z
					
	to be glitch free, when x fires, y should be updated first, then z 
	
	in general, the dataflow graph should be updated breath-first.
*/

const list = document.getElementById("list");
const xs = Rx.Observable.interval(100).take(10).share();
const ys = xs.combineLatest(xs, (x1, x2) => [x1,x2]).sample(xs);
const zs = xs.combineLatest(ys, (x,y) => [x,y]).sample(ys);
zs.subscribe(log);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.