在 for 循环中进行多个 ajax 调用答案

【问题标题】：making multiple ajax calls within a for loop在 for 循环中进行多个 ajax 调用
【发布时间】：2017-01-17 12:30:52
【问题描述】：

我是 javascript 的相对新手，我正在尝试在 for 循环中进行多个 ajax 调用。每次通过循环时，它都会使用不同的 url 循环遍历数组的元素以进行 ajax 调用。问题是变量“test”的值总是等于“condition4”。我习惯了其他语言，其中“test”的值将是“condition1”，然后是“condition2”等，因为它通过 for 循环。这是我的代码的简化版本：

var myData = [];
var cnt = 0;
var link;
var myCounter = 0;
var myArray = ["condition1", "condition2", "condition3", "condition4"];

for (x = 0; x < myArray.length; x++) {
    link = "https://test.com/" + myArray[x];
    myCounter = x;
    GetJSON(function (results) {
        for (i = 0; i < results.data.length; i++) {
            var id = results.data[i].identifier;
            var test = myArray[myCounter];
            myData[cnt] = { "id": id, "test": test };
            cnt++;
        }
    });
}

function GetJSON(callback) {
    $.ajax({
        url: link,
        type: 'GET',
        dataType: 'json',
        success: function (results) {
            callback(results);
        }
    });
}

【问题讨论】：

还是老话，JS是按名字绑定的。创建一个新范围，或者通过使用 context 传递它们来避免关闭本地变量。
这是因为您的 ajax 调用是异步完成的，所以当您成功时，循环将变为 4，因此您的所有结果将是 4

标签： javascript

【解决方案1】：

我认为您可以通过向服务器发送和接收 myCounter 值来解决此问题

for (x = 0; x < myArray.length; x++) {
  link = "https://test.com/" + myArray[x];
  myCounter = x;
  $.ajax({
    url: link,
    type: 'GET',
    dataType: 'json',
    data: { myCounter: myCounter}
    success: function(results) {
      for (i = 0; i < results.data.length; i++) {
        var id = results.data[i].identifier;
        var test = results.data[i].myCounter
        myData[cnt] = {
          "id": id,
          "test": test
        };
        cnt++;
      }
    }
  });

}

【讨论】：

【解决方案2】：

当您执行循环时，它会附加myCounter 引用。然后，由于异步任务，当它完成并调用'myCounter'时，它已经达到了数字4。所以，当它调用'myCounter'时，它是4。为了隔离范围，你需要创建一个新的范围每次迭代并隔离“myCounter”的每个值

for (x = 0; x < myArray.length; x++) {
    link = "https://test.com/" + myArray[x];
    myCounter = x;
    //IIFE
    (function() {
      var ownCounter = myCounter; //Isolating counter
      GetJSON(function (results) {
        for (i = 0; i < results.data.length; i++) {
            var id = results.data[i].identifier;
            var test = myArray[ownCounter];
            myData[cnt] = { "id": id, "test": test };
            cnt++;
        }
      });
      
    })();
    
}

或者……

for (let x = 0; x < myArray.length; x++) {
    link = "https://test.com/" + myArray[x];
    myCounter = x;
    
    GetJSON(function (results) {
      for (i = 0; i < results.data.length; i++) {
          var id = results.data[i].identifier;
          var test = myArray[x];
          myData[cnt] = { "id": id, "test": test };
          cnt++;
      }
    });
     
        
}

【讨论】：