opensocial-jquery.jsとjsdeferred.jsを一緒に使ってみる

APIからJSON配列を取得して要素を展開する処理は、opensocial-jquery.jsでは下記のように記述できます。

$(document).ready(function(){
	$.getJSON("/boke/randomArray?size=5")
	.next(function(data) {
		var bokes = data.randomArray;
		alert(bokes.length);
		
		$.each(bokes, function(i, boke) {
			alert(boke.bokeValue);
		});
	})
	.error(function() {
		alert("error");
	});
});

待機を伴う配列の展開処理

上記の配列展開について「１つの要素を表示したら、３秒待って次の要素を表示する」というような待機処理を追加することを考えます。
opensocial-jquery.jsでは、待機処理のために$.wait()という関数が定義されています。
これを利用することにより、javascript標準のsetTimeout()を使わずにシーケンシャルな待機処理の記述が可能になります。
しかし、$.each()はDeferredオブジェクトに触らないので、each()のコールバック関数にreturn $.wait(3);としても、待機処理は有効になりません。

$.each(bokes, function(i, boke) {
	alert(boke.bokeValue);
	// 3秒待たずに次の要素へ
	return $.wait(3);
});

jsdeferred.jsのloop()で配列を展開する

returnされたDeferredを処理してもらうには、loop()で配列を展開する必要がありますが、loop()は残念ながらopensocial-jquery.jsでは非対応です。
なので、opensocial-jquery.jsとjsdeferred.jsを共用することにしてみます。

$(document).ready(function(){
	$.getJSON("/boke/randomArray?size=5")
	.next(function(data) {
		var bokes = data.randomArray;
		alert(bokes.length);
		
		Deferred.loop(bokes.length, function(i) {
			alert(bokes[i].bokeValue);
			return Deferred.wait(3);
		});
	})
	.error(function() {
		alert("error");
	});
});

$.each()をDeferred.loop()で置き換えました。これでopensocial-jquery.jsから受け取った配列の展開を、待機処理を含めてシーケンシャルに記述することができるようになりました。