javascript - JavaScript 没有从 JQuery-AJAX 中捕获正确的列表项

Question

我有两个函数 main 函数，其中 JQuery 和另一个在 Javascript 中。

jQuery：

$(document).ready(function () {
  $('#ProvisionLink').click(function () {
    var queryTargetList = [ "Item1","Item2","Item3","Item4"]
    var data =  ["Data1","Data2","Data3","Data4" ]
    event.preventDefault();
    var i;

    for(i = 0; i < queryTargetList.length; ++i) {
          var dataItem = data[i];
          var QueryItems = queryTargetList[i];
          console.log("Before Launching the Javascript : " +QueryItems)
          $.ajax({
            url: '/operation',
            data: {DataType: dataItem,},
            type: 'POST',
            success: function (response){ getInventory(response,QueryItems) },
            error: function (error) {console.log(error);}
            });
    }

  });
});

Java脚本：

   function getInventory(data,queryTarget){
  console.log("In Get Inventory Function in javascript ... " +queryTarget)
  var queryTarget = "#"+queryTarget

  // get the query id
  const SelectBoxQuery = document.querySelector(queryTarget)
  console.log(SelectBoxQuery)
  // resetting the values to enter all the new one.
  SelectBoxQuery.options.length = 0; // reset the values

  // making a loop to reach each element item in the list
  for (var i = 0; i < data.length; ++i) {

    // add new element which is option to the targeted ID
    var SelectBoxQuery_Addition = document.createElement('option');

    // adding a text to that option
    SelectBoxQuery_Addition.text = data[i];

    // apply the adding .
    SelectBoxQuery.add(SelectBoxQuery_Addition)

  }}

问题是，在我得到 python FLASK 对 Jquery 函数的响应之后。在成功部分，它应该使用与 queryTargetList 相同的 i 启动 javascript 函数。

例如，如果我传递数据 [1]，我希望也有 queryTargetList [1]。

但在 javascript console.log 函数中。这不会发生。它打印 queryTargetList 列表的最后一项。

打印：

Before Launching the Javascript : Item1
JQueryTests.js:11 Before Launching the Javascript : Item2
JQueryTests.js:11 Before Launching the Javascript : Item3
JQueryTests.js:11 Before Launching the Javascript : Item4
operationJavaScript.js:115 In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4

我不知道做错了什么:(

标签： javascriptjquery

Answer 1

由于 ajax 调用是异步操作，因此在i调用成功方法时循环变量会发生变化。不能保证i会到达终点。您需要将变量包装在一个闭包中，以便它的成功方法获得正确的项目。示例代码未经测试。

$(document).ready(function () {
$('#ProvisionLink').click(function () {
var queryTargetList = [ "Item1","Item2","Item3","Item4"]
var data =  ["Data1","Data2","Data3","Data4" ]
event.preventDefault();
var i;

for(i = 0; i < queryTargetList.length; ++i) {
      var dataItem = data[i];
      var QueryItems = queryTargetList[i];
      console.log("Before Launching the Javascript : " +QueryItems)
      (data,queryItem)=>{
         $.ajax({
           url: '/operation',
           data: {DataType: data,},
           type: 'POST',
           success: function (response){ getInventory(response,queryItem) },
           error: function (error) {console.log(error);}
        });
      })(dataItem,QueryItems);
}

});
 });