javascript - 使循环等待ajax调用

Question

This question already has an answer here:

Wait for AJAX to finish before proceeding with the loop?
                                
                                    （1个答案）
                                
                        
                                5年前关闭。
            
                    
是否可以让此循环等到AJAX调用完成后再进行下一个迭代？

for(curr;curr < total;curr++) {
    $this.val('Uploading '+(curr+1)+' out of '+total);
    var tmpStr = JSON.stringify(o[curr]).replace("&", "and");
    tmp[0] = JSON.parse(tmpStr);

    $.ajax({
        type: 'POST',
        url: 'http://example.com/api/post',
        data: "data="+JSON.stringify(tmp),
        success: function(msg) {

            var d = JSON.parse(msg);
            if (d.success) {

                //localStorage.removeItem("data");
            }
            else
            {
                alert("Data failed to upload, please try again");
            }
        },
        error: function(msg) {
            alert("Data failed to upload, please try again");
            $this.val('Upload to CMS');
        }
    });
}

最佳答案

您可以将when关键字与递归函数一起使用。 when关键字允许您等待ajax调用。在ajax调用之后，当函数将结果发送到完成的函数时，甚至会失败。您可以通过在ajax调用中添加一些错误控制来扩展方案。但我举这个例子：

function reCursive(curr,total)
{
    if(curr < total) 
    {
        $this.val('Uploading '+(curr+1)+' out of '+total);
        var tmpStr = JSON.stringify(o[curr]).replace("&", "and");
        tmp[0] = JSON.parse(tmpStr);

        $.when(function() 
        {
            return $.ajax(
            {
                type: 'POST',
                url: 'http://mvc.sivapi.sheffieldnetwork.com/form/submit/submit/meadowhallEaster/',
                data: "data="+JSON.stringify(tmp),
                success: function(msg) 
                {
                    var d = JSON.parse(msg);
                    if (d.success) 
                    {
                        //localStorage.removeItem("data");
                    }
                    else
                    {
                        alert("Data failed to upload, please try again");
                    }
                },
                error: function(msg) 
                {
                    alert("Data failed to upload, please try again");
                    $this.val('Upload to CMS');
                }
            });
        }).done(function (x) 
        {
            //When you get the result from your ajax call. Write your code here.
            curr++;
            reCursive(curr, total);
        });
    }
}

关于javascript - 使循环等待ajax调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23740051/

上一篇：javascript - 如何使用 firebase simple login for facebook 处理用户信息

下一篇：javascript - 从 php 到没有 history.back() 的 html 页面 div id 的后退按钮

Answer 1

您可以将when关键字与递归函数一起使用。 when关键字允许您等待ajax调用。在ajax调用之后，当函数将结果发送到完成的函数时，甚至会失败。您可以通过在ajax调用中添加一些错误控制来扩展方案。但我举这个例子：

function reCursive(curr,total)
{
    if(curr < total) 
    {
        $this.val('Uploading '+(curr+1)+' out of '+total);
        var tmpStr = JSON.stringify(o[curr]).replace("&", "and");
        tmp[0] = JSON.parse(tmpStr);

        $.when(function() 
        {
            return $.ajax(
            {
                type: 'POST',
                url: 'http://mvc.sivapi.sheffieldnetwork.com/form/submit/submit/meadowhallEaster/',
                data: "data="+JSON.stringify(tmp),
                success: function(msg) 
                {
                    var d = JSON.parse(msg);
                    if (d.success) 
                    {
                        //localStorage.removeItem("data");
                    }
                    else
                    {
                        alert("Data failed to upload, please try again");
                    }
                },
                error: function(msg) 
                {
                    alert("Data failed to upload, please try again");
                    $this.val('Upload to CMS');
                }
            });
        }).done(function (x) 
        {
            //When you get the result from your ajax call. Write your code here.
            curr++;
            reCursive(curr, total);
        });
    }
}