jQuery.AJAX/JSON出力が混在する

Question

まだjQueryの新機能はありますが、AJAXを使用してAPIから出力を取得しようとしましたが、これはテストとしてウェブサイトに送信されています。私の問題は、それが奇妙な方法で注文を並べ替えるということです。私はそれが

HTML

<p id="beatmap-name1"></p> 
<p id="beatmap-id1">1179268</p> 
<p id="beatmap-name2"></p> 
<p id="beatmap-id2">582801</p> 
<p id="beatmap-name3"></p> 
<p id="beatmap-id3">1179268</p> 

jQueryの

$(document).ready(function(){ 

var counter = 0; 
for (var i = 1; i <= 3; i++) 
{ 
var $mapID = $('#beatmap-id' + i).text(); 

$.ajax({ 

    type: 'GET', 
    url: 'https://osu.ppy.sh/api/get_beatmaps?k=...&b=' + $mapID, 
    success: function(data){ 
    $.each(data, function(i, map){ 
     counter++; 
     $('#beatmap-name' + counter).text(map.title); 
     }) 
     } 

    }) 
    } 
}) 

私は、私は非常に非効率的な方法でこれをやっている保証は、しかし、これはただの問題である説明し、その後、以下の私のコードを投稿します「うまくいく」、「うまくいきませんか」のいずれかになります。

要約すると、jQueryコードは、マップIDをbeatmap-id1、2、および3内で取得することから始まります。そのうちの1つを受け取ると、それを変数$ mapIDに挿入し、それをAPI URLに挿入します。このリンクは、入力されたIDに基づいて特定のJSONを表示します。これで、入力されたmapIDとJSONコードが取得された後、そのJSONコードの特定の部分を取り出してループ内に出力することになっています。しかし何らかの理由で、それは奇妙な方法で出力し、決して非常に一貫した方法で出力しません。そのようなマップ名（私は出力するために呼んでいます）は、ランダムで不整合な命令になります。このような問題を解決するにはどうすればいいですか？ （私はJSONが出力する順序を並べ替えると聞いたことがありますが、この問題に当てはまるのか分かりません）

Answer 1

説明あなたの「ランダムな一貫性のない順序」に、あなたの応答を受信したランダムな順序によるものです。あなたはあなたのコードで複数のajaxリクエストを実行しています。リクエストしたのと同じ順番で応答することを前提としています。つまり、id 1のリクエストはid 2のリクエストとコードカウンターはあなたの要求が引き起こされる順序であなたの応答が到着しない順序で割り当てられます。ちょうどカウンタ変数を削除して、インデックスの問題を解決するために無名関数を追加するには、コードを修正するために

：

$(document).ready(function(){ 

for (var i = 1; i <= 3; i++) 
{ 
    var $mapID = $('#beatmap-id' + i).text(); 

    var fn = function(index){ 
     $.ajax({ 
      type: 'GET', 
      url: 'https://osu.ppy.sh/api/get_beatmaps?k=a51bbccbf7f74898e481e8176caf7189ceae36cd&b=' + $mapID, 
      success: function(data){ 
         $.each(data, function(var1, map){ 
         $('#beatmap-name' + index).text(map.title); 
         }) 
        } 
     }); 
    }; 

    fn(i); 
} 
}); 

Answer 2

AJAXについての全体的な点は非同期です。したがって、リクエストが特定の順序で送信されても​​、コールバック関数が同じ順序で呼び出されることは保証されません。

たとえば、2番目のビートマップが読み込みに時間がかかる場合、そのリクエストに関連付けられたコールバックが3番目のビートマップのコールバックの後に実行される可能性があります。

カウンタを、値がiの変数に置き換える方法があります。

編集：私は機能ajaxRequestにAJAX呼び出しを分離し、それが動作しているようだ：

EDIT 2：@artemisianはすでにしばらく前にこのソリューションを与えたようです。ここで

はスクリプトです：

for (var i = 1; i <= 3; i++) { 
     ajaxRequest(i); 
    } 

    function ajaxRequest(j) { 
     var $mapID = $('#beatmap-id' + j).text(); 
     $.ajax({ 
      type: 'GET', 
      url: 'https://osu.ppy.sh/api/get_beatmaps?k=a51bbccbf7f74898e481e8176caf7189ceae36cd&b=' + $mapID, 
      success: function (data) { 
       $.each(data, function (i, map) { 
        $('#beatmap-name' + j).text(map.title); 
       }); 
      } 
     }); 
    }