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

我知道它已经晚了所以也许我已经过了一段时间，也许一些睡眠会帮助我从不同的角度看待这个问题，如果有人可以帮助我或者告诉我一个改变，我会很感激。

感谢!!!

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

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

Answer 2

你想要从你的回调中递归，以便它调用序列中的下一个（如果它存在）。

var processArrayAsync = function(array) {
    // Define the iteration handler as a static property to avoid the 
    // overhead of its creation for mulitple calls to processArrayAsync.
    // If you'll only be using this method once or twice, then this 
    // technique isn't necessary
    if ( !processArrayAsync.step ) {
        processArrayAsync.step = function(i) {
            if ( !array[i] ) { return; }

            $("#progressbar").progressbar('option', 'value', array[i]);                
            $.ajax({
                type: "POST",
                url: "AjaxWcf.svc/TestModal",
                contentType: "application/json; charset=utf-8",
                data: {
                    "num":   array[i],
                    "total": 100
                },
                dataType: "json",
                success: function(msg) {
                    $("#progressbar").progressbar({value: array[i]});
                    $("#message").value = msg;                            
                    // After the callback has completed, process the next 
                    // element in the array
                    processArrayAsync.step(i+1);
                },
                error: function(msg) {
                    AjaxFailed(msg);
                    // You may want to stop processing if one request 
                    // fails, if so, just change this back to 
                    // `error: AjaxFailed`
                    processArrayAsync.step(i+1);
                }
            });
        };
    }

    processArrayAsync.step(0);
};

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

暂停For循环jQuery问题

2 个答案: