javascript - ループへの Ajax 関数

Question

私が抱えている問題に対する回答をお願いします (一部は配列です):

for(i=1;i<part.length;i++){
    $("#content").append('<div id="id' + i + '"></div>');
    $.get('ajax.php?id=' + i, function(data) {
        console.log("cache" + i);
        $("#id" + i).html(data);
    });
});

問題は、$.get関数に入ると、ループが終了したときの i の値が I の値になることです。私の配列（部分）には140行あるので、1、2、3ではなく、常に140になります..

ajax コールバックで i 値を取得するには?

返信ありがとうございます。

score 2 · Accepted Answer

または、サーバーから JSON を取得し、それを反復処理します。

$.get('ajax.php', { from: 1, to: 140 } ).done(function(data) {
    $(data).each(function(index) {
        //do something with this and index
    });
});

このようにして、内部でインデックスにアクセスし、サーバーへのリクエストを 1 つだけ起動するため、ネットワークを汚染しません。

score 0 · Accepted Answer

ループは、ブラウザーが許可する限り一度に多くの AJAX 要求を開始しようとしますが、特定の順序で完了するという保証はないことに注意してください。

本当に 140 個の AJAX リクエストを送信する必要がある場合は、代わりに次のことをお勧めします。

var i = 1;
(function loop() {
    if (i < part.length) {
        $("#content").append('<div id="id' + i + '"></div>');
        $.get('ajax.php?id=' + i).done(function(data) {
            console.log("cache" + i);
            $("#id" + i).html(data);
            i++;
        }, loop);
     }
});

score 0 · Accepted Answer

AJAX 呼び出しは非同期であるため、すべてのコールバックはループの後に実行されます。

関数式を使用して、反復ごとに個別の変数を作成できます。

for(i=1;i<part.length;i++){
  $("#content").append('<div id="id' + i + '"></div>');

  (function(i){

    $.get('ajax.php?id=' + i, function(data) {
      console.log("cache" + i);
      $("#id" + i).html(data);
    });

  })(i);

});

score -1 · Accepted Answer

$.ajax -version を使用して async-parameter を false に設定することもできます。ドキュメントを参照して、使用方法を確認してください。

async: false編集: ただし、使用は悪い習慣であり、非推奨になることに注意してください。

javascript - ループへの Ajax 関数

4 に答える 4

Related

Reference