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 行，我将永远是 140，而不是 1 然后 2 然后 3 ..

如何在 ajax 回调中获取 i 值？

谢谢您的回复。

Answer 1

或者，从服务器获取 JSON 并对其进行迭代：

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

这样您就可以在内部访问索引，并且只会向服务器发出一个请求，因此不会污染网络。

Answer 2

由于 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);

});

Answer 3

请注意，您的循环将尝试在浏览器允许的情况下一次触发尽可能多的 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);
     }
});

Answer 4

Guffa 他的回答应该有效，您也可以使用$.ajax -version 并将 async-parameter 设置为 false。查看文档以了解如何使用它。

编辑：应该注意的是，使用async: false是一种不好的做法，将被弃用。