2011年09月25日

jQuery Deferred

jQuery DeferredはjQuery1.5から追加された機能。名前の通りDeferred(繰延)についての制御が可能。

Deferredメソッド

単純にDeferredオブジェクトを生成するにはDeferredメソッドを実行する。

var obj = $.Deferred();


それ以外でもアニメーション系のメソッドやAjax系のメソッドがDeferredオブジェクトを返すようになっている。

var obj = $("#hoge").animated(....)


var obj = $.ajax(....)


thenメソッドとresolveメソッド

Deferredオブジェクトは遅延を制御します。Deferredオブジェクトにthenメソッドを利用して遅延して行いたい処理を実装します。設定しておいた処理はresolveメソッド実行時に処理されます。

var obj = $.Deferred();
obj.then(function(){
alert('ok1');
});

setTimeout( function() {
obj.resolve();
}, 2000 );


この場合2秒後にthenで設定していたalertが表示される。

サンプル

アニメーション系のメソッドはアニメーション終了時に、Ajax系のメソッドはAjax終了時にresolveメソッドが実行されます。

rejectメソッドとfailメソッド


失敗時の処理を制御できるのがfailメソッド、失敗時に実行したい命令をfailメソッドで指定しておきrejectメソッドで発火出来る

var obj = $.Deferred();
obj.then(function(){
alert('ok1');
}).fail(function(){
alert('ng!')
});

setTimeout( function() {
obj.reject();
}, 2000 );


サンプル

Ajax系のメソッドはAjax失敗時にrejectメソッドが実行されます。

alwaysメソッド

全てのケース、つまりreject()されようがresolve()されようが実行するのがalways

var obj = $.Deferred();
obj.always(function(){
alert("finish")
});

setTimeout( function() {
obj.reject();// or ojb resolve()
}, 2000 );


サンプル

whenメソッドとdoneメソッド

複数のDeferredオブジェクトの遅延を制御できるのがwhenメソッド。

var obj1 = $.Deferred();
var obj2 = $.Deferred();

$.when(obj1,obj2).done(function(){
$("body").append("<p>complete</p>")
})

setTimeout( function() {
$("body").append("<p>obj1 end</p>")

obj1.resolve();
}, 2000 );

setTimeout( function() {
$("body").append("<p>obj2 end</p>")
obj2.resolve();
}, 4000 );


whenメソッドで指定された複数のDeferredオブジェクトが実行された際にdoneメソッドで定義されている処理が実行されます。

サンプル


posted by ねこまんま at 09:00 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。