jQuery 1.5 の Deferred オブジェクトについてのメモ

jQuery 1.5 から Deferred オブジェクトというものがサポートされるようになりました。jQuery.ajax() も Deferred オブジェクトを拡張した jqXHR オブジェクトを返すようになったし、Deferred オブジェクトとは何か知っておいたほうが、何かと便利なのではないかと思ったので、調べたことをメモっていきます。(あまり理解出来ていないかもしれないので、誤りがあったらフィードバックをお願いします!)

deferred.done(), deferred.fail(), deferred.then() について

以下の3つは同じ処理になる。つまり、deferred.done() は成功時、deferred.fail() は失敗時のコールバック処理を実装する。また deferred.then() は第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数を指定することができる。

$.get("test.php")
.success(function(){ console.log("succeeded", arguments); })
.error(function(){ console.log("failed!", arguments); });
$.get("test.php")
.done(function(){ console.log("succeeded", arguments); })
.fail(function(){ console.log("failed!", arguments); });
$.get("test.php").then(
    function(){ console.log("succeeded", arguments); },
    function(){ console.log("failed!", arguments); }
);

jQuery.when() について

jQuery.when() は Deferred オブジェクトを返す。なので、

$.when( ... ).done( ... ).fail( ... );
$.when( ... ).then( function() { ... }, function() { ... });

ってな感じで使う。

引数には、1つ以上の Deferred オブジェクト(jqXHR オブジェクトを含む)、もしくは JavaScript のプレーンなオブジェクトを指定できる。
1つの Deferred オブジェクトを指定するのはあまり意味がないっぽい?
複数の Deferred オブジェクトを引数に指定することで真価を発揮する。

$.when( $.ajax("/page1"), $.ajax("/page2"), $.ajax("/page3") )
.done ( function( res1, res2, res3 ) { ... } )
.fail( ... );

このように、$.ajax() を複数指定すると、最初の $.ajax() が成功したら、次の $.ajax() を実施、と続き、すべての $.ajax() が成功したら done() に進む、という流れになる。どこかの $.ajax が error になったら、その先の $.ajax() は実行されず、即、fail() が実行される。res1, res2, res3 は $.when() の引数で指定した複数の $.ajax() の成功時の戻り値がそれぞれセットされる。ここでは、$.ajax() を例にしたが、Deferred オブジェクトを返す関数なんかを引数に指定することも当然可能。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>