jQuery.Deferredとは

jQueryバージョン1.5から加わった機能で、非同期処理便利に行うために用意されたものです。
$.ajaxなどをサンプルを見ると、書き方が変わったことが分かります。

jQuery バージョン1.5より前

jQuery バージョン1.5以降

同期と非同期

同期非同期とは何でしょう?

同期は、処理を実行したら、結果・完了が返ってくるのを待って、次の処理を実行します。

非同期は、処理を実行したら、結果・完了を待たずに、次の処理を実行します。

特にJavaScriptでは、非同期で処理が行われる場合が多く、コールバックを多用して、次の処理を実行します。

コールバック地獄

非同期での処理が多くなると、コールバックによって入れ子が深くなり、コードの視認性・可読性が悪くなり、あまり良くありません。

成り行きで、入れ子の深いコードを書くことは、簡単ですが、自分で書いたコードでも、二度と触りたくないものになることがあります。

ECMAScript6で実装されるyield(イールド)というものを使うと、このコールバックの地獄から逃れることができるようですが、ブラウザでの実装が追いついていない状況です。

というわけで、jQuery.Deferredを使って、非同期処理を書こうと思います。

とりあえずアニメーションでやってみた

簡単なアニメーションでは、あまり恩恵は得られませんが、やってみました。
jQueryのanimatecompleteを利用して、順番に動かします。
普通にやるとこんな感じでしょうか。

コールバックを入れ子

サンプル – コールバックを入れ子

deferredを使ったパターン1

サンプル – deferredを使ったパターン1

行数的には長くなりました。あまりイケていません。
調べてみると、ajaxだけでなく、animateなどもdeferredオブジェクトが使われているようです。

わざわざ、自分で$.Deferred()しなくても良いようです。

deferredを使ったパターン2

サンプル – deferredを使ったパターン2

先ほどよりもスッキリしましたね。
これなら実務でも簡単に使えそうです。

$.when

$.whenを使うと、複数のdeferredオブジェクトを監視することができます。

whenを使ったパターン

サンプル – whenを使ったパターン

まとめ

jQuery.Deferredは、deferredオブジェクトを作成(もしくはdeferredオブジェクトが作成される機能を使用)し、promiseを返すとdeferredを使う準備ができます。

準備後は、thenを使って、チェーンメソッドで、処理を次々実行させることができます。

thenは自動でpromiseを返すので、thenを連結させていくと、簡単に記述できます。

jQueryのanimate系は、アニメーション終了時に自動的にresolveしてくれるようで、こちらも意識しなくても良いようになっています。

これで、非同期ライフが送れそうです。
そんじゃーねー。