javascript - (为什么)这个 ajax 队列会覆盖响应数据？

Question

我使用此处发布的 ajax 请求队列:Wait until all jQuery Ajax requests are done?

现在我写了下面的代码来实现它:

for (var i=0; i<3; i++) {
    $.ajaxQueue({
        url: '/action/',
        data: {action:'previous',item:i*-1},
        type: 'GET',
        success: function(data) {
            $('.item-history .itemlist').prepend(data['item_add']);
            $('.item-history .itemlist:first .index').html(data['newitemindex']);
            //alert(data['newitemindex'])       
        };
    });

只要我使用警报来证明来自服务器的响应，一切正常。但是一旦我运行代码，如图所示，没有警报，data['newitemindex'] 的行为就好像它是一个全局变量一样 - 它总是返回最后一项的值。

我试图在此基础上设置一个 jsfiddle，但由于我从未使用过该网站，所以我无法让 ajax 工作。如果有人想看一看:http://jsfiddle.net/marue/UfH5M/26/

Answer 1

您的代码设置了三个 ajax 调用，然后将每个调用的结果应用于相同的元素(您在success 中使用的选择器没有区别> 功能)。对于 $('.item-history .itemlist') 元素，您应该看到元素的每次调用的结果prepended 因为您正在使用 prepend() ，但对于 $('.item-history .itemlist:first .index') 元素，您使用的是 html() 替换元素的内容，因此您将看到最后一次调用完成的结果。

---

题外话:要解决这个问题，您可能需要在 success 函数中以某种方式使用循环变量。这可能会导致您犯一个常见的错误，所以这里有一个错误示例以及如何避免它。

假设我有这些 div:

<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>

我想在单击按钮时使用三个 ajax 调用来填充它们，使用从 1 到 3 的循环计数器。我可能认为我可以这样做:

$('#btnGo').click(function() {
  var i;

  for (i = 1; i <= 3; ++i) {
    $.ajax({
      url: "/agiba4/" + i,
      dataType: "text",
      success: function(data) {
        // THIS NEXT LINE IS WRONG
        $('#div' + i).html(data);
      },
      error: function(xhr, status, err) {
        $("<p/>").html(
          "Error, status = " + status + ", err = " + err
          ).appendTo(document.body);
      }
    });
  }
});

Live example (失败)

但是(如前所述)这不起作用。它不起作用，因为我们创建的每个 success 函数都有一个对 i 变量的持久引用，不是创建 success 函数时其值的副本。因此所有三个 success 函数都看到相同的 i 值，这是函数运行时的值——在循环完成很久之后。因此(在此示例中)，他们都看到了值 4(循环结束后 i 的值)。这就是闭包的工作原理(参见:Closures are not complicated)。

要解决此问题，您需要对其进行设置，以便 success 函数关闭不会被循环更新的内容。最简单的方法是将循环计数器作为参数传递给另一个函数，然后让 success 函数关闭该参数，因为该参数是 copy循环计数器，不会更新:

$('#btnGo').click(function() {
  var i;

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

  function doRequest(index) {
    $.ajax({
      url: "/agiba4/" + index,
      dataType: "text",
      success: function(data) {
        $('#div' + index).html(data);
      },
      error: function(xhr, status, err) {
        $("<p/>").html(
          "Error, status = " + status + ", err = " + err
          ).appendTo(document.body);
      }
    });
  }
});

Live example