在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

您可以使用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 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

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

$("#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);
        }