ajaxの実行順序について

Question

ajaxを利用して、HTMLに表示する情報を取得しているのですが、
コンボボックスへのデータセットに問題が起きています。

データの取得とコンボ情報の取得を別々に問い合わせており、
コンボ情報の取得が先に行われていないと、データで取得してきたコンボの選択値がセットされないようで、
値のセットが上手くいったり上手くいかなかったりします。

調べて、

$.when(
alert('1'),
   setCombo(),
alert('2');
).done(function () {
  $.ajax({
    type: 'GET',
    url: file,
    dataType: 'json',
    success: function(data) {
      alert('3');
      $("#cmbValue").val(data.cmbValue);
    },error:function() {}
  })
});

コードfunction setCombo(){
  $.ajax({
    type: 'GET',
    url: file2,
    dataType: 'json',
    success: function(data) {
        jQuery(document).ready(function ($) {
        for (var i in data) {
           $("#cmbValue").append("<option value=" + data[i].cmbCode + ">" + data[i].cmbName + "</option>");
         }
         });
    },error:function() {}
  })
}

<select name="cmbValue" id="cmbValue"><option value=""></option></select>

このように、setCombo()を行ってからデータ取得を行いたかったのですが、
アラートは１⇒３⇒２
となりました。

コンボ情報の取得⇒データの取得の順序で行うか、
データセットが先になっても、コンボの選択値が消えないようにするにはどのようにしたらよいでしょうか？

ちなみに、コンボの取得後のsuccessでデータ取得を行えば解決できるとは思いますが、
setCombo()は他からも呼び出して使いたいのと、
コンボは１か所だけではなく、setCombo1 setCombo2・・・と数多くあるため、
successで繋げていくと凄く階層が深くなるため、
この手段はとれません。

宜しくお願いします。

Answer 1

非同期処理のチェックにalertはやめたほうがいいでしょうconsole.logで確認して下さい
基本的に順番に処理したいなら$.whenをネストします
煩雑になるのを気にするならasync,awaitでの処理になるでしょう

Answer 2

ネストなどがむずかしければ$timeoutを使って強制的に処理を遅らせちゃうという手もあります。

Answer 3

function setCombo(){
  return $.ajax({
// ...  
  })
}

とすると、どうなりますか？

Comments

[mi37]

実行は出来ますが、変わりはなかったです。。。