揮発性のメモ2

http://d.hatena.ne.jp/iww/

ajaxを順番に実行させるとき、みんなに共通のオブジェクトを渡せるようにする

ajaxHoge1(), ajaxHoge2(), ajaxHoge3() の全員に 自動的に同じオブジェクト obj を渡したい。 そして順番に処理させたい

ajaxHoge1(obj)       // 1番目の処理
  .then(ajaxHoge2)   // 2番目の処理
  .then(ajaxHoge3);  // 3番目の処理
/**
 * 1番目の処理
 * @param obj {Object}  全員で使いまわすオブジェクト
 */
function ajaxHoge1(obj){
    console.log("Hoge1 はじまるよ");
    var defer = $.Deferred(); // deferred変数

    $.ajax({
        url: "hoge1.php",
        dataType: 'json',
        data: {"data": obj.hoge1} // hoge1でのデータなど

    }).done(function(json,status,xhr){
        console.log("Hoge1 成功したよ");
        obj.hoge2 = json.result; // 引き継ぎたい情報があればここで編集できる
        defer.resolve(obj); // ★成功フラグ立てる
        showResult(obj); // フラグを立てた後は、バックグラウンドで並列に処理される

    }).fail(function(xhr, textStatus, errorThrown){
        console.log("Hoge1 失敗したよ");
        defer.reject(obj); // ★失敗フラグ立てる

    });

    return defer.promise();
}

大事なのは、defferd変数をちゃんと作ってobjを登録するところ。

注意1
状態変更をする(★のところ)と、その瞬間に次の処理が実行される。
なので、次に進む前にやっておきたい処理は必ず状態変更前におこなう
注意2
呼び出し時に .done でなく .then で処理をつなげているのは、成功/失敗の状態変更がおこなわれるまで待たせるため。
.done でつなげると、Hoge1が成功したら Hoge2とHoge3が並列に実行される
ajaxHoge1(obj)       // 1番目の処理
  .done(ajaxHoge2)   // 2番目の処理  1番目が成功したらすぐ動く
  .done(ajaxHoge3);  // 3番目の処理  1番目が成功したらすぐ動く
  .then(ajaxHoge4);  // 4番目の処理  1番目が成功したらすぐ動く
  .then(ajaxHoge5);  // 5番目の処理  4番目が成功するまで動かない

また、このとき Hoge2 や Hoge3 のなかで obj を編集しても 次に引き継がれないので注意する
(Hoge4が引き継ぐのは Hoge1の obj)