airheadの日記: code: Queued setTimeout()
日記 by
airhead
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>JavaScript: Queued setTimeout()</title>
</head>
<body>
<textarea cols="0" rows="0" style="width: 100%; height: 20em;" id="result"></textarea>
<script type="text/javascript"><!--
var _log = function(){
var rslt = "";
var ta = document.getElementById("result");
var tach = ta.clientHeight;
ta.value = rslt;
return function (str){
rslt += str + "\n";
ta.value = rslt;
ta.scrollTop = ta.scrollHeight - tach;
}
}();
var createQueuedTimer = function(){
var queue = [];
var timer;
var active = false;
var callNext = function(){active = false; setTimer();}
var setTimer = function (){
if (queue.length && !active){
active = true;
var arg = queue.shift();
var arg0 = arg[0];
var task = (typeof(arg0)=="function") ?
function(){arg0(); callNext();}
: (typeof(arg0)=="string") ?
function(){(new Function(arg0))(); callNext();}
: callNext;
timer = setTimeout(task, arg[1]);
}
}
return {
clear:
function(){
clearTimeout(timer);
queue = [];
active = false;
},
skip:
function(){
clearTimeout(timer);
active = false;
setTimer();
},
set:
function(){
if (arguments.length){
queue.push(Array.apply(null, arguments));
}
setTimer();
}
}
}
var queue = createQueuedTimer();
queue.set('_log("This is a dummy entry and will be skipped.");', 500);
queue.set('_log("ex.1: basic usage - set() and skip()");');
queue.set('_log("a");', 1000);
queue.set(function(){_log("b");});
queue.skip(); // will not skip _log("b");, but the dummy entry before its timeout.
queue.set('_log("c");', 500);
// queue.set('queue.clear();'); // clears the remaining queue entries immediately after the execution of _log("c");.
queue.set(function(){_log("d");}, 250);
queue.set('_log("\\nex.2: single for-loop - i{}");');
for(var i=0; i<30; i++){
(function(i){
queue.set(function(){_log("i"+i);});
})(i);
}
queue.set('_log("end of i");');
queue.set('_log("\\nex.3: nested for-loops - k{ i{} j{} }");');
var delay = 100;
for(var k=0; k<2; k++){
(function(k){
queue.set(function(){_log("k"+k);}, delay);
})(k);
for(var i=0; i<3; i++){
(function(i, k){
queue.set(function(){_log(" i"+i+" (k"+k+")");}, delay);
})(i, k);
}
queue.set('_log(" end of i");', delay);
for(var j=0; j<4; j++){
(function(j, k){
queue.set(function(){_log(" j"+j+" (k"+k+")");}, delay);
})(j, k);
}
queue.set('_log(" end of j");', delay);
}
queue.set('_log("end of k");', delay);
queue.set('_log("\\nex.4: parallel for-loops - i{} and j{} ")');
queue.set(function(){
var queue0 = createQueuedTimer();
var queue1 = createQueuedTimer();
for(var i=0; i<10; i++){
(function(i){
queue0.set(function(){_log("i"+i);}, 500);
})(i);
}
queue0.set('_log("end of i");', 0);
for(var j=0; j<5; j++){
(function(j){
queue1.set(function(){_log(" j"+j);}, 1000);
})(j);
}
queue1.set('_log(" end of j");', 0);
});
// --></script>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<title>JavaScript: Queued setTimeout()</title>
</head>
<body>
<textarea cols="0" rows="0" style="width: 100%; height: 20em;" id="result"></textarea>
<script type="text/javascript"><!--
var _log = function(){
var rslt = "";
var ta = document.getElementById("result");
var tach = ta.clientHeight;
ta.value = rslt;
return function (str){
rslt += str + "\n";
ta.value = rslt;
ta.scrollTop = ta.scrollHeight - tach;
}
}();
var createQueuedTimer = function(){
var queue = [];
var timer;
var active = false;
var callNext = function(){active = false; setTimer();}
var setTimer = function (){
if (queue.length && !active){
active = true;
var arg = queue.shift();
var arg0 = arg[0];
var task = (typeof(arg0)=="function") ?
function(){arg0(); callNext();}
: (typeof(arg0)=="string") ?
function(){(new Function(arg0))(); callNext();}
: callNext;
timer = setTimeout(task, arg[1]);
}
}
return {
clear:
function(){
clearTimeout(timer);
queue = [];
active = false;
},
skip:
function(){
clearTimeout(timer);
active = false;
setTimer();
},
set:
function(){
if (arguments.length){
queue.push(Array.apply(null, arguments));
}
setTimer();
}
}
}
var queue = createQueuedTimer();
queue.set('_log("This is a dummy entry and will be skipped.");', 500);
queue.set('_log("ex.1: basic usage - set() and skip()");');
queue.set('_log("a");', 1000);
queue.set(function(){_log("b");});
queue.skip(); // will not skip _log("b");, but the dummy entry before its timeout.
queue.set('_log("c");', 500);
// queue.set('queue.clear();'); // clears the remaining queue entries immediately after the execution of _log("c");.
queue.set(function(){_log("d");}, 250);
queue.set('_log("\\nex.2: single for-loop - i{}");');
for(var i=0; i<30; i++){
(function(i){
queue.set(function(){_log("i"+i);});
})(i);
}
queue.set('_log("end of i");');
queue.set('_log("\\nex.3: nested for-loops - k{ i{} j{} }");');
var delay = 100;
for(var k=0; k<2; k++){
(function(k){
queue.set(function(){_log("k"+k);}, delay);
})(k);
for(var i=0; i<3; i++){
(function(i, k){
queue.set(function(){_log(" i"+i+" (k"+k+")");}, delay);
})(i, k);
}
queue.set('_log(" end of i");', delay);
for(var j=0; j<4; j++){
(function(j, k){
queue.set(function(){_log(" j"+j+" (k"+k+")");}, delay);
})(j, k);
}
queue.set('_log(" end of j");', delay);
}
queue.set('_log("end of k");', delay);
queue.set('_log("\\nex.4: parallel for-loops - i{} and j{} ")');
queue.set(function(){
var queue0 = createQueuedTimer();
var queue1 = createQueuedTimer();
for(var i=0; i<10; i++){
(function(i){
queue0.set(function(){_log("i"+i);}, 500);
})(i);
}
queue0.set('_log("end of i");', 0);
for(var j=0; j<5; j++){
(function(j){
queue1.set(function(){_log(" j"+j);}, 1000);
})(j);
}
queue1.set('_log(" end of j");', 0);
});
// --></script>
</body>
</html>