Jquery 如果上一个AJAX调用完成，则只执行下一个AJAX调用

我通过一个AJAX调用在后台生成PDF。生成PDF需要一些时间（大约一秒钟左右）

下面的操作很好，但问题是我的内存不足。 因此，我只希望在前一个AJAX调用完成时才开始计算（即只发出AJAX调用）

我一直在玩

async:false

，但这会冻结我的页面，这是不必要的行为（无论如何，使用

async

是不推荐的）

我的代码：

$("div[data-myid]").each(function(){

    var myid= $(this).data('myid');
    var my_div = $(this);

    $.ajax({
        url: "/my_ajax/" + myid + "/",
    }).done(function (data) {
        my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
    });

});

$（“div[data myid]”）。每个（函数（）{
var myid=$（this.data（'myid'）；
var my_div=$（此）；
$.ajax({
url:“/my_ajax/”+myid+“/”，
}).完成（功能（数据）{
my_div.html（data.message+“”）；
});
});

HTML:

排队。。
排队。。

注意：该表是动态生成的，通常包含100多行

你知道如何最好地解决这个问题吗？

可能是这样的：

function postponeAjax(index,element){
     var myid= $(element).data('myid');
     var my_div = $(element);
     setTimeout(function(){
        $.ajax({
          url: "/my_ajax/" + myid + "/",
        }).done(function (data) {
          my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
        });
      },index*2000);

    }
    $("div[data-myid]").each(function(index,element){ // if I remember well
       postponeAjax(index,element)   
    });

所以我们可以这样做：

   var number_of_elements =  $("div[data-myid]").length;
   var current_index = 0;
   var myid, mydiv;

   function doAjax(){
        mydiv = $("div[data-myid]:eq("+current_index+")"))
        myid = mydiv.data('myid');
        $.ajax({
            url: "/my_ajax/" + myid + "/",
        }).done(function (data) {
           my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
        });
        current_index++;
   }
   //repeat until there is no more elements
   $(document).ajaxStop(function(){
      if(current_index < number_of_elements){
         doAjax();
      }
   });
   //init the sequence
   doAjax();

var number\u of_元素=$（“div[data myid]”）长度；
var当前_指数=0；
变量myid，mydiv；
函数doAjax（）{
mydiv=$（“div[数据myid]：eq（“+当前索引+”））
myid=mydiv.data（'myid'）；
$.ajax({
url:“/my_ajax/”+myid+“/”，
}).完成（功能（数据）{
my_div.html（data.message+“”）；
});
当前_索引++；
}
//重复此操作，直到没有更多元素
$（文档）.ajaxStop（函数（）{
if（当前_索引<_元素的数量）{
doAjax（）；
}
});
//初始化序列
doAjax（）；

---

我还没有对此进行测试，所以如果它不起作用，请通知我：D

下一个ajax应该在当前ajax调用完成后启动。下面的代码将帮助您实现它

实现它的步骤。

• 为所有div创建一个数组并将DOM对象推送到一个数组中
• 为ajax调用创建一个函数，并为所有 部门

• doAjax

  函数将在ajax成功函数中调用。所以,， 下一个ajax将仅在当前任务完成后启动

这是我的代码：

 <script type="text/javascript">    

    var elementArray = [];

    //Code to push all divs in elementArray
    $(document).ready(function(){
        $("div[data-myid]").each(function () {
            elementArray.push($(this));
        });
        // First ajax call.
        doAjax(0);
    });

    //Function to ajax fire
    function doAjax(arrCount) 
    {
        var myid = elementArray[arrCount].data("myid");
        var my_div = elementArray[arrCount];

        $.ajax({
            url: "/my_ajax/" + myid + "/",
            type:"POST",
            dataType:"json",
            success: function (data) {              
                if (arrCount < elementArray.length-1) {
                {
                    my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
                    arrCount++;
                    //Next ajax call when current ajax call has been finished.
                    doAjax(arrCount);
                }         
            }
        });
    }

</script>

var elementArray=[]；
//用于推送elementArray中所有div的代码
$（文档）.ready（函数（）{
$（“div[data myid]”）。每个（函数（）{
elementArray.push（$（this））；
});
//第一个ajax调用。
doAjax（0）；
});
//ajaxfire的函数
函数doAjax（arrCount）
{
var myid=elementArray[arrCount]。数据（“myid”）；
var my_div=elementArray[arrCount]；
$.ajax({
url:“/my_ajax/”+myid+“/”，
类型：“POST”，
数据类型：“json”，
成功：函数（数据）{
if（arrCount

你能利用webWorkers的工作吗？@RokoC.Buljan：我从来没有使用过webWorkers，但它们似乎在执行一个外部JS文件-不确定这会有什么帮助？你能提供一些上下文吗？这确实是一个肮脏的黑客行为。问题是我的pdf生成也不是静态的（可能需要0.5秒或3秒，具体取决于它包含的数据）。默认情况下延迟3秒也不理想。我得到了这个：P:）也只是第二个智能解决方案：）@MarkoMackic:谢谢：）

   var number_of_elements =  $("div[data-myid]").length;
   var current_index = 0;
   var myid, mydiv;

   function doAjax(){
        mydiv = $("div[data-myid]:eq("+current_index+")"))
        myid = mydiv.data('myid');
        $.ajax({
            url: "/my_ajax/" + myid + "/",
        }).done(function (data) {
           my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
        });
        current_index++;
   }
   //repeat until there is no more elements
   $(document).ajaxStop(function(){
      if(current_index < number_of_elements){
         doAjax();
      }
   });
   //init the sequence
   doAjax();

 <script type="text/javascript">    

    var elementArray = [];

    //Code to push all divs in elementArray
    $(document).ready(function(){
        $("div[data-myid]").each(function () {
            elementArray.push($(this));
        });
        // First ajax call.
        doAjax(0);
    });

    //Function to ajax fire
    function doAjax(arrCount) 
    {
        var myid = elementArray[arrCount].data("myid");
        var my_div = elementArray[arrCount];

        $.ajax({
            url: "/my_ajax/" + myid + "/",
            type:"POST",
            dataType:"json",
            success: function (data) {              
                if (arrCount < elementArray.length-1) {
                {
                    my_div.html(data.message + ' <a href="' + data.url +  '">Download</a>');
                    arrCount++;
                    //Next ajax call when current ajax call has been finished.
                    doAjax(arrCount);
                }         
            }
        });
    }

</script>