jQueryのDeferred Objectとは。

jQuery1.5から導入されていたDeferred Objectについて、詳しく理解していなかったので調べてみたところ、すてきな機能っぽいのでまとめてみた。

そもそもDeferred Objectとはなにか?

jQuery.Deferred(), introduced in version 1.5, is a chainable utility object that can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.
callback queuesに複数のcallbackを登録できてるオブジェクトで、同期・非同期の処理の成功と失敗を中継する。と言った感じ。

DeferredオブジェクトはCommonJSのPromises/Aをもとに設計されていて、生成されてからunresolved -> pending -> resolved or rejected という具合に状態をたどります。
それぞれの状態を監視して、pending、resolveもしくはreject時に登録した関数を実行します。

ajaxの処理やウィジェット同士の通信などオブジェクトの状態に応じて、レスポンス精度の高いアプリケーションを作る際にDeferredオブジェクトを利用するといいらしい。
実際にアニメーション系のメソッドやajax系のメソッドなどのオブジェクトもDeferredオブジェクトを返してくれるようになってるので、これまでと違い

となります。いままでよりすっきりして見通しがいい気がします。また、メソッドチェーンで書けるというところもいい感じです。
というわけで、Deferredオブジェクト簡単に使ってみる。

` //Deferred object var df = $.Deferred();

//resolve、rejectにかかわらずに実行
df.always(func)

//resolve時に実行されるメソッド指定
.done(func)

//reject時に実行されるメソッド指定
.fail(func)

//経過中に実行されるメソッド指定
.progress(func);
`

細かく制御できるのがいい感じです。
また処理が完了するまでqueueにしておき、完了時に処理を進める(遅延処理)できるということも特徴です。

` //Deferred object
var df = $.Deferred();

//resolve/reject時の前に実行されるメソッド指定
.pipe(func)

//Deferred Promise object
//将来的にresolve, reject, progressなどのstateに
//変更されるDeferred object
.promise()

//resolve,reject,progress時の処理を登録
.then(resolve func, reject func, progress func)

//複数のDeferred objectが処理されるまで遅延する
$.when(Deferred objects)
`

ざっくりまとめてみたけど、便利だな。

Comments