【jquery】ajaxを介した直列処理において、複数のreturnがある場合

Question

###実現したいこと
ajaxで●を取得して、以下の順番でコンソールに出したいです。

「最初の処理」
↓
「appleの色は●です」
「pineの色は●です」
↓
「最後の処理」

###発生している問題
だいたいの処理は下記「試したこと」のようにできました。ですが、

return ajax_action('apple');だけなら下記で動くのですが、さらに
return ajax_action('pine');と２つセットで書くと動かなくなってしまうんです。

###試したこと
下記がそのコードで、★の印のコメントアウトしてあるところが問題の箇所です。

ボタンクリックでフルーツを指定し、ajaxでその色を取得してからコンソールにメッセージを出し、その後にクリックイベントに戻って「最後の処理」を実行したい。という考えになります。

しかし★印の箇所のように２つ続けて書くと動かないという状況です。

// クリックしたらコンソールに順に表示する
$(function(){
  $('button').click(function(){
    $.Deferred().resolve()
    .then(function(){
      console.log('最初の処理');
    })
    .then(function() {
      // ★ここで指定したフルーツの色をajaxで取得し、その色を使ってコンソールにメッセ―ジを出したいのに、次のように２つ並べるとできなくなってしまう
      return ajax_action('apple');
      return ajax_action('pine');
    })
    .then(function() {
      // 上でフルーツについてのメッセージが出てから最後の処理を出したい
      console.log('最後の処理');
    });
  });
});

// フルーツの色を取得する
function ajax_action(fruits){
  var d=$.Deferred();
  $.ajax({
    url: url,
    type: 'POST',
    data: {
      fruits: fruits, 
    }
  })
  .done(function(color) {
    return $.when( insert_action(fruits,color) ).then(function(){
      d.resolve();
    });
  })
  .fail(function() {
    alert('error');
  }); 
}

// コンソールにメッセージを出す
function insert_action(fruits,color){
  var d=$.Deferred();
  console.log(fruits+' の色は '+color+ 'です');
  d.resolve();
  return d.promise();
}

実現したいことのために、おかしいところ、直すべきところを教えて頂きたいです。宜しくお願い致します。

Answer 1

まず、ajax_action が何も返していないので d を返すようにします。

function ajax_action(fruits){
  // (中略)
  return d;
}

jQuery.when() で 複数同時に待つことができます。順序が重要でない場合はこれでいいでしょう。

    .then(function() {
      return $.when(ajax_action('apple'), ajax_action('pine'));
    })

https://api.jquery.com/jQuery.when/

Comments

[marimon]

すみませんニアミスでmaisumakunさまにも教えて頂きましてベストアンサーとさせて頂きました。間違いのご指摘とリンク先につきましても、どうもありがとうございます。よく読んでおきます。

[marimon]

あれ？なんで「return d;」だけで出来るのですか？「return d.promise();」じゃないといけないような気がしまして。もしよかったら教えて頂けませんでしょうか。

[x_x]

ああ、d.promise()のほうがいいですね。
.resolve() とかが呼べなくなるだけなのでそれだけでも動くには動きます。

[marimon]

なるほど。すみませんよくわかってなくて。教えて頂きありがとうございます。

Answer 2

しかし★印の箇所のように２つ続けて書くと動かないという状況です。

returnを書くと、そこで関数から抜けるので、関数の残りは実行されません。

素直に.thenを複数書きましょう。

    .then(function() {
      return ajax_action('apple');
    })
    .then(function() {
      return ajax_action('pine');
    })

Comments

[marimon]

すみません ajax_action() はものすごく重いので、そのようにしますと無駄な時間がかかってしまう（appleが終わるまでpineが処理できなくなってしまう）と思い避けています。

[maisumakun]

でしたら、return $.when(ajax_action('apple'), ajax_action('pine'));とするのも一案です。

[marimon]

すごい！「when」は実は今日知ったのですが、こうも使えるんですね。ありがとうございます。