Skip to content

Instantly share code, notes, and snippets.

@brainlid

brainlid/index.html

Forked from anonymous/index.html
Created August 4, 2016 13:22
Show Gist options
  • Save brainlid/4f495d39e6b78df73efe3201b556ca32 to your computer and use it in GitHub Desktop.
Save brainlid/4f495d39e6b78df73efe3201b556ca32 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin [Queue for rendering 1 at a time] // source http://jsbin.com/basuzi
Raw
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/[email protected]/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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment