jquery - 仅在前一个 AJAX 调用完成后才执行下一个 AJAX 调用

Question

我正在通过 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>');
    });

});

HTML:

<table>
    <tr>
        <td><div id="div_260" data-myid="260">Queued..</div></td>
    </tr>
    <tr>
        <td><div id="div_259" data-myid="259">Queued..</div></td>
    </tr>
</table>

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

关于如何最好地解决这个问题有什么想法吗？

Answer 1

只有在当前 ajax 调用完成后才应触发下一个 ajax。下面的代码将帮助您实现它。

实现这一目标的步骤。

• 创建一个数组并将 DOM 对象推送到所有 div 的数组中。
• 创建一个用于ajax调用的函数，并为所有的递归调用它分区。
• doAjax函数将在ajax成功函数中调用。所以，仅当当前的 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>