JSDeferred - seikoudoku2000のブログ

xhrを併用しながら、レンダリング処理をハンドリングできるものを探していて、JSDeferredなるものの存在を知る。
http://coderepos.org/share/wiki/JSDeferred

サンプルを見たり、この辺を見たりしてみたのだけど、
http://gihyo.jp/assets/files/event/2007/wdpress-tm2007/data/WDB-TechMTG-01-amano/cy/index.html
http://d.hatena.ne.jp/nishiohirokazu/20080124/1201154132
自分のローカルでそのまま動かせるコードがなくて、自分の頭ではいまいち動作が理解しきれなかったので、簡単なコードで動作確認をしてみた。

<html>
<head>
<title>jsDeferredTest</title>
<script type="text/javascript" src="./jsdeferred.js"></script>
<script type="text/javascript">

Deferred.define();

function funcA(){
	document.getElementById("testDiv").innerHTML = "funcA";
}

function funcB(){
	document.getElementById("testDiv").innerHTML = "funcB";
}

var a;
//nextのサンプル
function test1(){
	next(function() { funcA(); }).wait(2).next(function() { funcB(); });
}

//書き換えるとこんな感じか？
function test2(){
	funcA();
	setTimeout(function(){funcB();},2000);
}


var array = new Array("111", "222", "333");
//loopのサンプル
function test3(){
	loop(array.length, function(i) {
    	document.getElementById("testDiv").innerHTML = "test3:" + array[i];
    	return wait(2);
	});
}

//これを書き換えるにはiを引数に別途関数が必要となりそう。面倒なので省略。
function test4(){
	for(i=0;i<array.length;i++){
		document.getElementById("testDiv").innerHTML = "test4:" + array[i];
	}
}

//parallelのサンプル
function test5(){
	parallel([
	    loop(array.length, function(i) {
	        document.getElementById("testDiv").innerHTML = "test5:" + array[i];
	        return wait(2)
	     }),
	    loop(array.length, function(i) {
	        document.getElementById("testDiv2").innerHTML = "test5:" + array[i];
	        return wait(2) 
	    })
	]).next(function() {
	    document.getElementById("testDiv2").innerHTML = "test5:end";
	    document.getElementById("testDiv").innerHTML = "test5:end";
	});
}

</script>

</head>

<body onload="">
<div style="position:relative;left:30px;top:30px;">
	<input type="button" value="1" onclick="test1();"/>
	<input type="button" value="2" onclick="test2();"/>
	<input type="button" value="3" onclick="test3();"/>
	<input type="button" value="4" onclick="test4();"/>
	<input type="button" value="5" onclick="test5();"/>
	
	<div id="testDiv">
		testDiv
	</div>
	<div id="testDiv2">
		testDiv2
	</div>
</div>
</body>
</html>

これは使いこなせれば煩雑にならずに色々できそうだ。waitってのがありそうでなかったかなり便利な処理。
http://blog.livedoor.jp/dankogai/archives/50637906.html
も一緒に参照すると、レンダリングのタイミングを制御できるということのありがたさが分かる気がする。

がしかーし、肝心のSTBのブラウザ上では全く動作せず、撃沈。。。
amachangさんも勉強になると言っていたし、js内部もじっくり見てみて、使えそうなところを探そう。