jQueryのDeferredって便利ですね

こんばんは、ころすけ(@wg_koro)です。

jQuery

今日、久々に「何をやっているのかよー分からん・・・」というjQueryコードと出会いました。

複数の画像があって

[html]
<img src=’gazou.jpg’ id=’pic1′>
<img src=’gazou2.jpg’ id=’pic2′>
[/html]

それに対するjQueryコードはこんな感じ。

[javascript]
function hoge(elem){
var E = $.Deferred();
elem.load(E.resolve());
return E.promise();
}

var $img1 = $(‘#pic1’);
var $img2 = $(‘#pic2’);

var list = [];
list.push(hoge($img1));
list.push(hoge($img2));

$.when.apply(null, list).then(function(){
alert(‘ほげほげ’);
});
[/javascript]

うん、最初何やっているのかさっぱり分かりませんでした。が、あちこちのサイトから情報を集めてやっと分かった。

画像#pic1、画像#pic2、両方のonloadが走ったらalert()させるってことなのね。ふむぅ。jQueryはあまり使わないからすんごい戸惑いましたw

あと.load()もわかりにくいですね。ちょっと探して出てきたリファレンスには.load(url, data, callback)とあったのですが、今回はこれに該当せず。何だこれ。

調べると、こういうことらしい。紛らわしい…。

[javascript]
$(‘#pic1’).load(function(){ alert(‘hogehoge’); });
 ↑は、↓と同じ
$(‘#pic1’).bind(‘load’, funciton(){ alert(‘hogehoge’); });
[/javascript]

しかしDeferredって便利だなー。慣れれば使いやすそう。今度使ってみるかな。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください