jQuery在ajax成功后继续循环执行

jQuery continue loop execution after ajax success

本文关键字：继续 循环 执行 成功 ajax jQuery      更新时间：2023-09-26

我有一个jQuery ajax调用循环。但是，我不希望这些ajax调用同时进行，我需要第一个ajax调用在进行下一个之前完成。

for (var i = 0; i < options.length; i++) {  
        jQuery.ajax({
            url: "ajax_file.php",
            data: //some data based on DOM tree
            success: function(data){
                //some DOM manipulation
            }
        });
}

我希望循环仅在执行了SUCCESS中的DOM操作之后才继续执行(因为ajax调用依赖于DOM树)。理论上我知道我可以将ajax调用设置为async:false，但不建议这样做，因为它可能会冻结浏览器。

因为async: false总是一个坏主意，我建议这样做:

var recur_loop = function(i) {
    var num = i || 0; // uses i if it's set, otherwise uses 0
    if(num < options.length) {
        jQuery.ajax({
            url: "ajax_file.php",
            data: //some data based on DOM tree
            success: function(data){
                recur_loop(num+1);
            }
        });
    }
};

将async设置为false将做到这一点。请记住，如果您异步执行请求，web浏览器可能会在请求发生时锁定。

jQuery.ajax({
    async : false,
    url: "ajax_file.php",
    data: //some data based on DOM tree
    success: function(data){
        //some DOM manipulation
    }
});

你可以这样做(伪代码):

var i =0;
doLoop();
function doLoop() {
   //exit condition
   if (i >= options.length) {
      return;
   }
   //loop body- call ajax
   $.ajax({
   //...
   success: function(data) {
      //do your thing
      i++;
      //go to next iteration of the loop
      doLoop();
   }
   });
}
相关文章：