jQuery.Deferred()についてわからない部分もあったのでいろいろと調べてみました。

$.Deferred()について

・Deferrdオブジェクトは非同期処理を監視するためのオブジェクト
・Deferrdオブジェクトの中にはPromiseオブジェクトというオブジェクトが内包している ・PromiseオブジェクトはDeferrdの状態を保持している。
状態は3種類
pending 処理中の状態
resolve 処理が成功したときの状態
rejected 処理が失敗したときの状態
・DeferredオブジェクトはPromiseの中身を変更する役割

deferredの使い方

deferredは下記のように使用します。

var func  = function (){
    var d = new $.Deferred;
    setTimeout(function(){
        console.log('delay!');
        d.resolve();//Deferredオブジェクトをresolveに変更
    },1000);
    return d.promise();//Promiseオブジェクトだけを返す
};

var promise = func();
promise.done(function(){
    console.log('resolved!');
}).fail(function(){
    console.log('rejected!');
});

func内でdeferredオブジェクトを呼び出して、funcが実行されたときにdefferredオブジェクトのpromiseを返します。 かえってきたオブジェクトによって.done()、.fail()が実行されます。

deferred.resolve()

Deferredオブジェクトをresolveの状態に変更する

deferred.rejected()

Deferredオブジェクトをrejectedの状態に変更する

deferred.promise()

DeferredオブジェクトのPromiseオブジェクトを返す

deferred.done()

Deferredオブジェクトがresolveの時実行する

deferred.fail()

Deferredオブジェクトがrejectedの時実行する

deferred.then()について

deferred.then()

done()とfail()をいっぺんに記述することができる。
先ほどのコードをthen()を使って書くとこうなる。

var func  = function (){
    var d = new $.Deferred;
    setTimeout(function(){
        console.log('delay!');
        d.resolve();//Deferredオブジェクトをresolveに変更
    },1000);
    return d.promise();//Promiseオブジェクトだけを返す
};

var promise = func();
promise.then(function(){
    console.log('resolved!');
},function(){
    console.log('rejected!');
});

またdeferred.then()は新たにDeferredオブジェクトを返す

var func = function func(){
    var d = new $.Deferred;
    setTimeout(function(){
        console.log('delay!');
        d.resolve();
    },1000);
    return d.promise();
};

func()
.then(func)
.then(func)
.then(func);

上記のコードはそれぞれのdeferred.then()がDeferredオブジェクトを返すため、1秒ごとにconsole.logが実行される。

deferred.when()について

deferred.when()

複数 のDeferredオブジェクトをまとめて、新たにDeferredオブジェクトを返す。
下記のように使用する。

[code lang=javascript] $.when(func(), func(), func()) .done(hello1); [/code]

when()の中がすべてresolovedの場合はresolovedになる。
rejectedが一つでも含まれるの場合はrejectedになる。
pendingの状態の場合は処理が進まない。

jQuery.ajax()・jQuery.getJSON()について

ajaxなどで返されるjqXHRオブジェクトに対しても.done(),.fail(),.then()が使用できます またリクエスト完了時に実行される.always()も使用可能です。

[code lang=javascript] $.ajax({ url: “data.json”, data: data, dataType: “json” }).done(function(){ console.log('done!'); }).fail(function(){ console.log('fail!'); }).always(function(){ console.log('complete!'); }); [/code]

下記のサイトを参考にさせていただきました。ありがとうございました。

爆速でわかるjQuery.Deferred超入門