【jQuery】Ajax（非同期）で複数のページから取ってきたデータの順番①

つい最近 Ajax の非同期通信で、いくつかのページから取ってきたデータを
取ってきた順に並べようとして、色々試した時のメモ。jQuery 使用。

1. まず簡単に for で回してみた。

script

<script>
var urls = ['/instagram/201701/1112',//【Instagram】カレーさいこー♪
            '/instagram/201611/1051',//【Instagram】もう冬の空。
            '/instagram/201611/916'];//【Instagram】福岡。
var num = urls.length;

for(var i = 0;i < num; i++){
  $.ajax({
    url: urls[i],
    type: 'get',
    dataType: 'html'
  }).done(function(data){
    var name = $(data).find('h1').text();
    $('#result1').append( i + ':' + name + '<br>');
  }).fail(function(data){
    $('#result1').append('ERROR<br>');
  });
}
</script>

Ajax① 発動せよ！

result

あら？えっと、順番を表示するつもりのiが常に振りきっとる？
おまけに発動する度に表示される順番が変わるんですがw

見事に失敗したようなので、ちょっとネットを探ってみます。

2. $.ajax を function でラップするといいらしい

script

<script>
var urls = ['/instagram/201701/1112',//【Instagram】カレーさいこー♪
            '/instagram/201611/1051',//【Instagram】もう冬の空。
            '/instagram/201611/916'];//【Instagram】福岡。
var num = urls.length;

for(var i = 0;i < num; i++){
  var count = i;
  (function(i){
    $.ajax({
      url: urls[i],
      type: 'get',
      dataType: 'html'
    }).done(function(data){
      var name = $(data).find('h1').text();
      $('#result2').append( i + ':' + name + '<br>');
    }).fail(function(data){
      $('#result2').append('ERROR<br>');
    });
  })(count);
}
</script>

こんな感じかな？

ソースはこちら。

Ajax② 発動せよ！

result

おぉ、ちゃんと結果とiが結びついとる！
でも結果が返されるタイミングは相変わらずバラバラなまんまですなー。

ぐぬぬぬ。。。順序も担保してもらいたいんだよなー。

あ、1 つ目の URL→完了→ 2 つ目の URL →完了→ 3 つ目の・・・・
といった感じでやれば、思い通りの結果が得られるはず！
たしかwhen()とかdone()とかそのあたり。

というわけで、次回は一個ずつ処理をして吐き出す方式を試してみます。