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 );

この場合２秒後に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メソッドで定義されている処理が実行されます。

サンプル