javascript - 暂停 For 循环 jQuery 问题

Question

我有一个关于 javascript/jQuery 的问题...我有一个 Web 服务，它将处理来自客户端的列表中的信息。我想要做的是让客户端逐段发送数据，从而使 Web 服务能够在不过载的情况下完成其工作。我还使用 jQuery UI 进度条，它允许用户查看其请求的进度。

我的问题是我正在使用 for 循环，当循环运行时，循环似乎运行到完成，因此如果有 10 条数据要处理，则所有 10 条数据同时运行...

我要问的是，有没有办法让 for 循环暂停，直到从服务器收到成功消息为止？

这是我尝试过的:

var nums = [1,2,3,4,5,6,7,8,9,10];

        for (var i in nums) {

        //I also tried 
        //for (num = 1; num <= 9; num++) {

            //start loop
            $("#progressbar").progressbar('option', 'value', num);
            var input = {
                "num": num,
                "total": 100
            }

            //  .progressbar('option', 'value', 37);              
            var jsonStr = JSON.stringify(input);
            //d = '{' + d + '}';
            $.ajax({
                type: "POST",
                url: "AjaxWcf.svc/TestModal",
                contentType: "application/json; charset=utf-8",
                data: jsonStr,
                dataType: "json",
                success: function(msg) {
                    $("#progressbar").progressbar({
                        value: num
                    });

                    //alert(msg.d);
                    //                    jQuery('#modalContentTest.loading').fadeOut(200);
                    //                    setTimeout('jQuery.modal.close()', 1000);

                    $("#message").value = msg;
                },
                error: AjaxFailed
            });
        }

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });

我知道已经晚了，所以也许我是斗鸡眼，也许睡一会儿会帮助我从不同的 Angular 看待这个问题，但是如果有人可以帮助解决这个问题或向我展示一个替代方案，我会很感激。

谢谢!!!

Answer 1

您的问题是 AJAX 调用是异步的，这意味着 $.ajax(...) 行将立即返回，而无需等待服务器接收请求并发送响应。

虽然可以发送同步请求，但您永远不应该这样做，因为它会完全卡住浏览器，直到请求完成。 (Javascript总是在浏览器的 UI 线程上运行)

您需要在上一个请求的 success 回调中发送每个请求。

例如:

function sendPart(num) {
        $("#progressbar").progressbar('option', 'value', num);
        var input = {
            num: num,
            total: 100
        };

        var jsonStr = JSON.stringify(input);

        $.ajax({
            type: "POST",
            url: "AjaxWcf.svc/TestModal",
            contentType: "application/json; charset=utf-8",
            data: jsonStr,
            dataType: "json",
            success: function(msg) {
                $("#message").value = msg;

                if (num < 10)
                    sendPart(num + 1);
            },
            error: AjaxFailed
        });
    }
}

sendPart(1);

请注意，如果前一个请求失败，则不会发送下一个请求。