jsの非同期実行を簡潔にしてくれる$.Deferredをシンプルに説明する

読了時間の目安:5分

Deferredとは？

jsにおける非同期実行を簡潔に記述するための仕組み

Deferredを1分で試してみる

1.下記をchrome consoleに貼りつける

QiitaはjQueryの新しいバージョンを使っているので、このままconsoleを開いても実行できます(Mac&Chromeなら、command+option+j)。

deferred.js

dfd = $.Deferred()
dfd.done(function(){
  console.log("遅延処理させたい処理を記述する。");
  console.log("後述のdfd.resolve()を実行したときに実行させたい処理を記述する。");
}).fail(function(){
  console.log("遅延処理させたい処理を記述する。");
  console.log("後述の=dfd.reject()を実行したときに実行させたい処理を記述する。");
})

2.次に、下記をconsoleに貼りつける

dfd.resolve()
//=>遅延処理させたい処理を記述する。
//=>後述のdfd.resolve()を実行したときに実行させたい処理を記述する。
//=>Object

dfd.resolve()を実行すると、dfd.doneで指定した関数が実行される。

dfd.reject()を実行すると、dfd.failで指定した関数が実行される。

dfdオブジェクト一つにつきresolve/rejectできる回数は、1回。どちらかを1回実行すると、そのdfdは解決済になり、それ以降resolve/rejectしても無視される。

応用:ajax通信におけるDeferred

ajax通信をすると、successしたときはresolveが実行され、failしたときはrejectが実行される。ちなみに、$.ajax系のメソッドの返り値は、jQuery1.5以降はすべてDeferredオブジェクト。だから、次のような書き方ができる。

$.ajax({url:"foo.json"}).done(function(result){
  console.log(result);
})

上記は、Deferredを使わないと次のような書き方になる

$.ajax(
 url:"foo.json",
 success:function(result){
  console.log(result);
 }
);

上記の例くらいであれば単純だが、次のような例だとかなり複雑になる。

$.ajax(
 url:"foo.json",
 success:function(foo){
   console.log(foo);
   $.ajax(
     url:"bar.json",
     success:function(bar){
       console.log(bar);
     }
   );
 }
)

Deferredのpipeメソッドを使うと、次のようになる。pipeメソッドは非同期通信をネストするためのメソッド。

$.ajax({url:"foo.json"}).done(function(foo){
  console.log(foo);
}).pipe(function(bar){
  return $.ajax({url:"bar.json"});
}).done(function(bar){
  console.log(bar);
})

まとめ

とりあえず、done,fail,resolve,rejectがわかっていれば、それなりに使いこなせると思います。