1.基礎
Deferredは非同期処理をわかりやすいソースコードとして読み書きするための仕組みである。
Deferredはunresolved,resolved,rejectedのいずれかの状態を持つ。
初期状態はunresolvedで、状態がunresolvedである限り、皇後続の処理は実行されない。
2.サンプル
$(function() { function first() { //var d = $.Deferred(); setTimeout(function () { for (var i=0; i<1000; i++) { console.log("hoge"); } //d.resolve(); }, 3000); console.log("first end"); //return d.promise(); } function second() { console.log("second!"); }; //first().then(second); first(); second(); });
まずはDeferred()を使わないパターン。
こいつをブラウザなどで使うと、コンソールには以下のように表示される。
つまり、for文の中の処理の完了を待たずに次のsecond()の処理が走ってしまっている。
ではDeferred()を使うとどうなるか?
上のコメントを外して、Deferredを使ってみる。
$(function() { function first() { var d = $.Deferred(); setTimeout(function () { for (var i=0; i<1000; i++) { console.log("hoge"); } d.resolve(); }, 3000); console.log("first end"); return d.promise(); } function second() { console.log("second!"); }; first().then(second); //first(); //second(); });
すると、実行結果は以下のように、ちゃんとfor文の中の処理が終わるまで待っていてくれる。
d.resolve()の部分は、Deferredオブジェクトの状態をresolvedに遷移させるメソッド。
then()はresolvedな状態のときは第一引数の処理を実行。
rejectedの状態のときは第二引数の処理を実行する。
3.その他
・done()
done()は状態がresolvedになった場合に実行する
・fail()
fail()は状態がresolvedの場合に実行する
・always()
always()で指定した処理はresolved,rejected両方で実行される
これらのメソッドについては、次回の記事に実際に使ってみる。
4.参考

パーフェクトJavaScript (PERFECT SERIES 4)
- 作者: 井上誠一郎,土江拓郎,浜辺将太
- 出版社/メーカー: 技術評論社
- 発売日: 2011/09/23
- メディア: 大型本
- 購入: 24人 クリック: 588回
- この商品を含むブログ (12件) を見る
初心者向けではないけれど、中級者をビシビシしごいてくれるようなイメージの本。
「あとがき」が人間味溢れてて好きだ。