ajax成功后jQuery继续循环执行

Posted 2023-05-09

【中文标题】ajax成功后jQuery继续循环执行

【英文标题】：jQuery continue loop execution after ajax success

【发布时间】：2011-11-11 22:38:41

【问题描述】：

我在循环中有一个 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，但不建议这样做，因为它会冻结浏览器。

【参考方案1】：

因为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);
            
        );
    
;

【讨论】：

这看起来像一些奇怪的递归......但到目前为止看起来就像一个魅力！

我一直在寻找的绝佳解决方案！谢谢你救了我的命。

【参考方案2】：

将async 设置为 false 即可。请记住，如果您异步执行请求，Web 浏览器可能会在请求发生时锁定。

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

【参考方案3】：

你可以这样做（伪代码）：

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();
   
   );