Description書いたけどなんか消えてたし、書きなおすの面倒臭いから、諦めた 株式会社エングラフィアの社内で行われてる LightningPresentation（質疑ありLT）で発表したスライドを 手直ししたものです。

1. jQuery.Deferred
Kotaro Kawashima / Engraphia corp.

2. $.Deferredってややこしい

3. そんなことないよ
じつはすげぇしんぷるなんよ

4. Deferred is Simple
1. インスタンス作って
2. done() でコールバック関数設定して
3. resolve() 呼ぶと
4. 2.のコールバック関数が実行される

5. だけ
もっと複雑な処理向けに
知っておくべき機能・知識はあるけど
今は知らないふりをしろ

6. 一番無意味でシンプルな
Deferred
var d = new $.Deferred();
d.done(function(){
console.log(“complete”);
});
d.resolve();

7. 何をやっているのか
• Deferredインスタンスはコールバック関数を保存でき
る
• done(), fail(), then(), always()
• Deferredインスタンスにresolve()命令をすると、
done()で保存した関数を実行する
• resolve() -> done(), then(first_argument), always()
• reject() -> fail(), then(…,second_argument), always()

8. シンプルなDeferred実用例
var d = new $.Deferred();
d.done(function(arg){
console.log(“result: “, arg); // -> result: rslt
});
setTimeout(function(){
var result = “rslt”;
d.resolve(result);
}, 10000); // 10秒かかる複雑なタスクの代わり

9. シンプルなDeferred実用例
• d.resolve() を非同期処理の完了後に呼んでる
• resolve / reject に引数を渡すと、コールバック関数の引数として処理できる
• コールバック関数は10秒後（非同期処理後）
に実行される
→ 非同期処理の完了を待っての処理が書ける

10. 複雑なDeferred実用例
function longTimeFunc(){
var d = new $.Deferred();
// 10秒かかる複雑なタスクの代わり
setTimeout(function(){
var result = “rslt”;
d.resolve(result);
}, 10000);
return d;
}
function main(){
var d2 = longTimeFunc();
d2.done(function(arg){
console.log(“complete”, arg);
// -> result: rslt
});
}

11. 何をやっているのか
• やってることは同じ
• 非同期処理部分を function 化しただけ
• いきなり複雑になる！
• 全部JavaScriptのせいだ！

12. $.Deferredの複雑な便利機能

13. $.Promise
• d.promise() で取得
• deferredからresolve/reject機能を省いたもの
• つまり状態変化をさせられないようにする
• functionの返り値にしておくと、関数の外で
勝手にresolve/rejectされなくて済むようになる

14. 複雑なDeferred実用例
function longTimeFunc(){
var d = new $.Deferred();
// 10秒かかる複雑なタスクの代わり
setTimeout(function(){
var result = “rslt”;
d.resolve(result);
}, 10000);
return d.promise();
}
function main(){
var p = longTimeFunc();
p.done(function(arg){
console.log(“complete”, arg);
// -> result: rslt
});
}

15. $.when()
• 複数あるpromiseをまとめる
• 非同期処理AとBとの両方が終わったら、done
を実行したい！
• $.when(promiseOfA, promiseOfB)
.done(function(){…});

16. d.then(donefunc, failfunc)
• done()とfail()とを一気に指定
• 普段は、返り値としてdeferred/promise（以下d/p）そのものが返ってくる
• d.then(asyncFuncA).then(asyncFuncB).then(funcC);
• var dFromA = d.then(asyncFuncA);
• var dFromB = dFromA.then(asyncFuncB);
• dFromB.then(funcC);
• d = dFromA = dFromB
• asyncFuncA, asyncFuncB, funcC は同時実行される

17. d.then(donefunc, failfunc)
• dのあと、非同期処理Aが終わったらB、それが終わったらC、という処理もかける！
• d.then(asyncFuncA).then(asyncFuncB).then(funcC);
• 条件：処理AおよびBが、そのfunctionの中で新しくDeferredを作成し、d/pを返
している
• このときのd.then()の返り値は、処理A/Bが返してきたd/pになる
• var dFromA = d.then(asyncFuncA);
• var dFromB = dFromA.then(asyncFuncB);
• dFromB.then(funcC);

18. おまけ

19. 非同期処理の個数が不定
• ウェブサービスのユーザー情報を、1ユーザー
1ajaxで取得
• ユーザー数は取得できるが、ユーザー数が変
動するので$.when()に渡せない！
API設計からやり直せ

20. 非同期処理の個数が不定
var userIds = getUserIds(); // ユーザーIDの配列
var ps = [];
for(var i = 0; i <userIds; i++){
var p = $.ajax(…); //$.ajaxはpromiseを返す
ps.push( p );
}
$.when.apply(this, ps).done(function(){
…
});