在 AJAX 循环结束后执行代码

Question

我有一个 AJAX 呼叫被呼叫 "i" 次。我只想在最后一个 AJAX processData 回调函数完成后执行其余代码（它将 .csv 的值填充到一个名为 "lines" 的数组中，并且在所有迭代完成后我需要完成的数组完成的）。到目前为止，它只能通过使用 "setTimeout()" 来工作，这不是一个很好的解决方案

for (var i = 0; i < options.length; i++) {
    (function(index) {
        $.ajax({
            type: "GET",
            url: options[index] + ".csv",
            dataType: "text",
            success: function(data) {
                processData(data, options[index], type)
            }
        });
    })(i);
}
setTimeout(function() {
    getAveragePercentages(lines);
}, 500)

Answer 1

设置一个计数器并在调用您的函数之前检查它的值

$("#counter").html("0");
for(var i=0;i<options.length;i++){
            (function(index){       
                $.ajax({ 
                    type: "GET",
                    url: options[index]+".csv",
                    dataType: "text",
                    success: function(data) {
                    processData(data, options[index], type)
                    var counter = $("#counter").html();
                    if( counter == options.length ){
                      getAveragePercentages(lines);
                    }
                     $("#counter").html(counter+1);
                   }
                });

            })(i);
        }

Answer 2

for (var i = 0; i < options.length; i++) {
    (function (index) {
        $.ajax({
            type: "GET",
            url: options[index] + ".csv",
            dataType: "text",
            success: function (data) {
                processData(data, options[index], type)
            }
        });
        counter = counter + 1;
    })(i);
    if (i == options.length) {
        getAveragePercentages(lines);
    }
}

Answer 3

你可以这样做。

最后一次循环成功调用函数后

var totalRec = options.length;
for(var i=0;i<options.length;i++){
    (function(index){       
        $.ajax({ 
            type: "GET",
            url: options[index]+".csv",
            dataType: "text",
            success: function(data) {processData(data, options[index], type)


           if(i == (totalRec-1)){
              getAveragePercentages(lines);
           }
        }
        });
    })(i);
}

或

var totalRec = options.length;
    for(var i=0;i<options.length;i++){
        (function(index){       
            $.ajax({ 
                type: "GET",
                url: options[index]+".csv",
                dataType: "text",
                success: function(data) {processData(data, options[index], type)


            }
            });
        })(i);

     if(i == (totalRec-1)){
          getAveragePercentages(lines); // gets called only when condition is true
      }
    }

Answer 4

使用 setTimeOut 等待 ajax 调用不是一个好的做法，根据我的经验，我一直使用递归函数来执行此操作，在您的情况下，您可以执行以下操作：

var counter = 0;
function main()
{
    counter = 0;
    doAjaxCall(counter);
}

function doAjaxCall(counter)
{
    (function(index){       
                $.ajax({ 
                    type: "GET",
                    url: options[index]+".csv",
                    dataType: "text",
                    success: function(data) {
                       processData(data, options[index], type);
                       if(counter < options.length)
                       {
                           counter++;
                           doAjaxCall(counter); //We call the same function but with the next index
                       }
                       else
                       {
                          //The loop finished, countinue code after your for loop
                       }
                    }
                });
            })(i);
}

Answer 5

您可以使用 JavaScript 承诺功能。

在承诺中提出AJAX请求。创建一个包含所有这些承诺的数组。

Promise.all 将在所有承诺得到解决后执行。

var promiseArr = [];
for (var i = 0; i < options.length; i++) {
    var promise = new Promise(function(resolve, reject) {
        (function(index) {
            $.ajax({
                type: "GET",
                url: options[index] + ".csv",
                dataType: "text",
                success: function(data) {
                    processData(data, options[index], type); resolve('outputIfany')
                }
            });
        })(i);
    });
    promiseArr.push(promise);
}
Promise.all(promiseArr).then(function(values) {
    getAveragePercentages(lines);
});

Answer 6

我添加了一个函数作为参数。 AJAX 加载完成后调用该函数。

function loadDoc(call_back_func) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    json_data = JSON.parse(this.responseText);
    call_back_func();
  }
  xhttp.open("GET", "kanban_personal_template.json");
  xhttp.send();
}

function load_call_back()
{
    console.log(json_data);
}
loadDoc(load_call_back);

在 AJAX 循环结束后执行代码

execute code after AJAX loop finished

javascript

ajax

jquery

iife