Question

我想以这种方式进行一堆Ajax调用：call（n）在call（n-1）完成后启动...

由于多种原因，我无法使用 async：false ：

某些请求可能 jsonp （最相关）
我还有其他可能同时工作的ajax请求..
浏览器被阻止

我不能用这种方式链接我的请求：

$.post('server.php', {param:'param1'}, function(data){
        //process data
    $.post('server.php', {param:'param2'}, function(data){
        //process data
    });
});

因为请求的数量和参数是从用户输入动态创建的。

一个小example，说明了我的问题。

您将看到服务器响应顺序是随机的，我想要实现的是按顺序

Response to arg1
Response to arg2
Response to arg3
Response to arg4
Response to arg5
Response to arg6

非常感谢任何帮助，谢谢。

Answer 1

好的，jQuery Ajax会返回Deferred Object，这可以帮助您实现这一目标。

以下是如何操作：

var args = ['arg1','arg2','arg3','arg4','arg5','arg6'];

deferredPost(0, 5);

function deferredPost(index, max){    
    var delay = Math.random()*3;
    if (index<max){
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'<br>');
        }).then(function(){
            deferredPost(index+1, max);
        });
    } else {
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'<br>');
        });
    }
}

DEMO

我在这里使用了then函数。

我还建议您阅读更多有关延迟对象的内容，它们可以解决一些常见问题。

Answer 2

这是队列的工作。

var queue = ['arg1','arg2','arg3','arg4','arg5','arg6'];

function runQueueInOrder() {
    if (queue.length === 0) { return; }
    var arg = queue.pop();
    var delay = Math.random()*3;
    $.post('/echo/html/', {html:('Response to '+ arg), delay:delay}, 
        function(data){
            $('#response').append(data+'<br>');        
    }).then(function() {
        runQueueInOrder();
    });        
}

runQueueInOrder();

如果您已在函数中封装了队列处理，则无需使用jQuery的then即可。这很方便。代码是破坏性的，因为它从原始数组中删除元素（但是当它们被处理时，它通常是正常的。）

调用方法runQueueInOrder以启动处理。

当没有更多的工作要做时，该功能就会退出。（我之前写的是一个定时器轮询的版本，但这里不需要）。

该函数抓取下一个工作arg，调用您的post调用语法，完成时使用jQuery的延迟然后回调再次调用该函数（如果需要，进一步处理队列）。

（我查看了另一个答案并发现它很容易跟随，因此我采用了一种更简单的方法。使用我的简单版本，您可以在发现新作品时添加新项目 - 或删除它们。）。

按顺序进行jQuery ajax调用

2 个答案: