forループでのAJAXリクエストの結果が間違って返される

Question

#containerに10個の画像を追加しようとしていますが、リクエストされているのと同じ順序で返されています注文。

私は現在forループを介してURLを取得し、以下のとおりAJAX要求にそれらを渡している：

for (i = 0; i < $links.length; i++) { 
    link = $links.eq(i).attr('href'); 

    // Appends anchor into #container 
    $('#container').append('<a href="' + link + '" class="tile"><p>' + $links.eq(i).text() + '</p></a>'); 

    $.ajax({ 
     type: 'GET', 
     url: link 
    }).done(function (data) { 
     var $data = $(data); 
     $('#container').append($data.find('img').eq(0)); 
    }); 
}; 

私は、これは素晴らしいことだ修正したり、より良い可能性がどのように任意の洞察力を！ありがとう！

Answer 1

これは、要求が非同期であるために予想される動作です。彼らはあなたが必要とする順序で解雇されるかもしれませんが、応答時間は完全にサーバーの慈悲と各要求を処理するのにかかる時間です。

たとえば、3つのリクエストを作成するとします。 ＃1は150msで完了し、＃2は200msと＃3で75msかかる。 done()ハンドラは、3,1,2の順番で要求を実行します。

応答を特定の順序で処理する場合、すべてのデータを1回の要求で送信するようにコードを修正する必要があります。応答は必要に応じてフォーマットできます。

async: falseを使用すると、予期した動作が発生する可能性がありますが、使用することは非常に悪い習慣であり、上記の解決策がさらに好ましいでしょう。