/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Queue for rendering 1 at a time]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.6/dist/global/Rx.umd.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body {
      background: #f5f5f5;
    }

    .panel-container-m {
      padding-top: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .panel-container-m > .panel {
      margin-bottom: 10px;
      padding-top: 15px;
      width: 100%;
      min-height: 100px;
      background-color: #fdfdfd;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
  <input type="button" value="Produce Event" id="produce-event" />
  </div>
  <div class="panel-container-m">
    Pending
    <div id="pending" class="panel">
    </div>
  </div>
  <div class="panel-container-m">
    In Progress
    <div id="in-progress" class="panel">
    </div>
  </div>
  <div class="panel-container-m">
    Completed
    <div id="done" class="panel">
    </div>
  </div>

<script id="jsbin-javascript">
var produceEvent = document.getElementById('produce-event');
var pending = document.getElementById('pending');
var inProgress = document.getElementById('in-progress');
var done = document.getElementById('done');

var inProgressCount = 0;

var events$ = Rx.Observable.fromEvent(produceEvent, 'click')
  .do(({timeStamp}) => updatePanelAppend(pending, Math.floor(timeStamp*1000)));

var inProgress$ = events$;

var done$ = inProgress$
  .flatMap(({timeStamp}) =>
                            Rx.Observable.defer(() => {
                              updatePanelAppend(inProgress, Math.floor(timeStamp*1000));
                              removeFromPanel(pending, Math.floor(timeStamp*1000));
                              return expensiveComputation(getRandomInt(1, 5) * 1000, Math.floor(timeStamp*1000));
                           }), 1);

done$.subscribe((timeStamp) => {
  updatePanelAppend(done, timeStamp);
  removeFromPanel(inProgress, timeStamp);
});

function updatePanelAppend(panelEl, newContent) {
  var newDiv = document.createElement('div');
  newDiv.id = '_' + newContent;
  newDiv.textContent = newContent + ',';
  panelEl.appendChild(newDiv);
}

function removeFromPanel(panelEl, timeStamp) {
  var el = panelEl.querySelector('#_' + timeStamp);
  panelEl.removeChild(el);
}

/**
* Simulate an expensive function that returns a promise
**/
function expensiveComputation(time, result) {
  console.log('expensiveComputation for:' + result);
  if (!time) {
    time = 1000;
  }
  return Q.delay(time).then(()=> result);
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">var produceEvent = document.getElementById('produce-event');
var pending = document.getElementById('pending');
var inProgress = document.getElementById('in-progress');
var done = document.getElementById('done');

var inProgressCount = 0;

var events$ = Rx.Observable.fromEvent(produceEvent, 'click')
  .do(({timeStamp}) => updatePanelAppend(pending, Math.floor(timeStamp*1000)));

var inProgress$ = events$;

var done$ = inProgress$
  .flatMap(({timeStamp}) =>
                            Rx.Observable.defer(() => {
                              updatePanelAppend(inProgress, Math.floor(timeStamp*1000));
                              removeFromPanel(pending, Math.floor(timeStamp*1000));
                              return expensiveComputation(getRandomInt(1, 5) * 1000, Math.floor(timeStamp*1000));
                           }), 1);

done$.subscribe((timeStamp) => {
  updatePanelAppend(done, timeStamp);
  removeFromPanel(inProgress, timeStamp);
});

function updatePanelAppend(panelEl, newContent) {
  var newDiv = document.createElement('div');
  newDiv.id = '_' + newContent;
  newDiv.textContent = newContent + ',';
  panelEl.appendChild(newDiv);
}

function removeFromPanel(panelEl, timeStamp) {
  var el = panelEl.querySelector('#_' + timeStamp);
  panelEl.removeChild(el);
}

/**
* Simulate an expensive function that returns a promise
**/
function expensiveComputation(time, result) {
  console.log('expensiveComputation for:' + result);
  if (!time) {
    time = 1000;
  }
  return Q.delay(time).then(()=> result);
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}</script></body>
</html>

## jsbin.basuzi.js
var produceEvent = document.getElementById('produce-event');
var pending = document.getElementById('pending');
var inProgress = document.getElementById('in-progress');
var done = document.getElementById('done');

var inProgressCount = 0;

var events$ = Rx.Observable.fromEvent(produceEvent, 'click')
  .do(({timeStamp}) => updatePanelAppend(pending, Math.floor(timeStamp*1000)));

var inProgress$ = events$;

var done$ = inProgress$
  .flatMap(({timeStamp}) =>
                            Rx.Observable.defer(() => {
                              updatePanelAppend(inProgress, Math.floor(timeStamp*1000));
                              removeFromPanel(pending, Math.floor(timeStamp*1000));
                              return expensiveComputation(getRandomInt(1, 5) * 1000, Math.floor(timeStamp*1000));
                           }), 1);

done$.subscribe((timeStamp) => {
  updatePanelAppend(done, timeStamp);
  removeFromPanel(inProgress, timeStamp);
});

function updatePanelAppend(panelEl, newContent) {
  var newDiv = document.createElement('div');
  newDiv.id = '_' + newContent;
  newDiv.textContent = newContent + ',';
  panelEl.appendChild(newDiv);
}

function removeFromPanel(panelEl, timeStamp) {
  var el = panelEl.querySelector('#_' + timeStamp);
  panelEl.removeChild(el);
}

/**
* Simulate an expensive function that returns a promise
**/
function expensiveComputation(time, result) {
  console.log('expensiveComputation for:' + result);
  if (!time) {
    time = 1000;
  }
  return Q.delay(time).then(()=> result);
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[Queue for rendering 1 at a time]">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
	<script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.6/dist/global/Rx.umd.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
	body {
	background: #f5f5f5;
	}

	.panel-container-m {
	padding-top: 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
	.panel-container-m > .panel {
	margin-bottom: 10px;
	padding-top: 15px;
	width: 100%;
	min-height: 100px;
	background-color: #fdfdfd;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div>
	<input type="button" value="Produce Event" id="produce-event" />
	</div>
	<div class="panel-container-m">
	Pending
	<div id="pending" class="panel">
	</div>
	</div>
	<div class="panel-container-m">
	In Progress
	<div id="in-progress" class="panel">
	</div>
	</div>
	<div class="panel-container-m">
	Completed
	<div id="done" class="panel">
	</div>
	</div>

	<script id="jsbin-javascript">
	var produceEvent = document.getElementById('produce-event');
	var pending = document.getElementById('pending');
	var inProgress = document.getElementById('in-progress');
	var done = document.getElementById('done');

	var inProgressCount = 0;

	var events$ = Rx.Observable.fromEvent(produceEvent, 'click')
	.do(({timeStamp}) => updatePanelAppend(pending, Math.floor(timeStamp*1000)));

	var inProgress$ = events$;

	var done$ = inProgress$
	.flatMap(({timeStamp}) =>
	Rx.Observable.defer(() => {
	updatePanelAppend(inProgress, Math.floor(timeStamp*1000));
	removeFromPanel(pending, Math.floor(timeStamp*1000));
	return expensiveComputation(getRandomInt(1, 5) * 1000, Math.floor(timeStamp*1000));
	}), 1);

	done$.subscribe((timeStamp) => {
	updatePanelAppend(done, timeStamp);
	removeFromPanel(inProgress, timeStamp);
	});

	function updatePanelAppend(panelEl, newContent) {
	var newDiv = document.createElement('div');
	newDiv.id = '_' + newContent;
	newDiv.textContent = newContent + ',';
	panelEl.appendChild(newDiv);
	}

	function removeFromPanel(panelEl, timeStamp) {
	var el = panelEl.querySelector('#_' + timeStamp);
	panelEl.removeChild(el);
	}

	/**
	* Simulate an expensive function that returns a promise
	**/
	function expensiveComputation(time, result) {
	console.log('expensiveComputation for:' + result);
	if (!time) {
	time = 1000;
	}
	return Q.delay(time).then(()=> result);
	}

	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var produceEvent = document.getElementById('produce-event');
	var pending = document.getElementById('pending');
	var inProgress = document.getElementById('in-progress');
	var done = document.getElementById('done');

	var inProgressCount = 0;

	var events$ = Rx.Observable.fromEvent(produceEvent, 'click')
	.do(({timeStamp}) => updatePanelAppend(pending, Math.floor(timeStamp*1000)));

	var inProgress$ = events$;

	var done$ = inProgress$
	.flatMap(({timeStamp}) =>
	Rx.Observable.defer(() => {
	updatePanelAppend(inProgress, Math.floor(timeStamp*1000));
	removeFromPanel(pending, Math.floor(timeStamp*1000));
	return expensiveComputation(getRandomInt(1, 5) * 1000, Math.floor(timeStamp*1000));
	}), 1);

	done$.subscribe((timeStamp) => {
	updatePanelAppend(done, timeStamp);
	removeFromPanel(inProgress, timeStamp);
	});

	function updatePanelAppend(panelEl, newContent) {
	var newDiv = document.createElement('div');
	newDiv.id = '_' + newContent;
	newDiv.textContent = newContent + ',';
	panelEl.appendChild(newDiv);
	}

	function removeFromPanel(panelEl, timeStamp) {
	var el = panelEl.querySelector('#_' + timeStamp);
	panelEl.removeChild(el);
	}

	/**
	* Simulate an expensive function that returns a promise
	**/
	function expensiveComputation(time, result) {
	console.log('expensiveComputation for:' + result);
	if (!time) {
	time = 1000;
	}
	return Q.delay(time).then(()=> result);
	}

	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}</script></body>
	</html>