Question

我需要在不锁定浏览器的情况下发出一系列N ajax请求，并希望使用jquery延迟对象来完成此任务。

这是一个包含三个请求的简化示例，但我的程序可能需要排队超过100个（请注意，这不是确切的用例，实际代码确实需要确保步骤（N-1）成功之前执行下一步）：

$(document).ready(function(){

    var deferred = $.Deferred();

    var countries = ["US", "CA", "MX"];

    $.each(countries, function(index, country){

        deferred.pipe(getData(country));

    });

 });

function getData(country){

    var data = {
        "country": country  
    };


    console.log("Making request for [" + country + "]");

    return $.ajax({
        type: "POST",
        url: "ajax.jsp",
        data: data,
        dataType: "JSON",
        success: function(){
            console.log("Successful request for [" + country + "]");
        }
    });

}

以下是写入控制台的内容（所有请求都是并行执行的，响应时间与每个国家/地区的数据大小成正比：

Making request for [US]
Making request for [CA]
Making request for [MX]
Successful request for [MX]
Successful request for [CA]
Successful request for [US]

如何让延迟对象为我排队？我已经尝试将完成更改为管道但得到相同的结果。

这是期望的结果：

Making request for [US]
Successful request for [US]
Making request for [CA]
Successful request for [CA]
Making request for [MX]
Successful request for [MX]

修改

我很欣赏使用数组来存储请求参数的建议，但是jquery延迟对象能够对请求进行排队，我真的想学习如何充分利用这个功能。

这实际上是我正在尝试做的事情：

when(request[0]).pipe(request[1]).pipe(request[2])... pipe(request[N]);

但是，我想一次一步地将请求分配到管道中，以便有效地使用每次遍历：

deferred.pipe(request[0]);
deferred.pipe(request[1]);
deferred.pipe(request[2]);

Answer 1

使用自定义对象

function DeferredAjax(opts) {
    this.options=opts;
    this.deferred=$.Deferred();
    this.country=opts.country;
}
DeferredAjax.prototype.invoke=function() {
    var self=this, data={country:self.country};
    console.log("Making request for [" + self.country + "]");

    return $.ajax({
        type: "GET",
        url: "wait.php",
        data: data,
        dataType: "JSON",
        success: function(){
            console.log("Successful request for [" + self.country + "]");
            self.deferred.resolve();
        }
    });
};
DeferredAjax.prototype.promise=function() {
    return this.deferred.promise();
};


var countries = ["US", "CA", "MX"], startingpoint = $.Deferred();
startingpoint.resolve();

$.each(countries, function(ix, country) {
    var da = new DeferredAjax({
        country: country
    });
    $.when(startingpoint ).then(function() {
        da.invoke();
    });
    startingpoint= da;
});

小提琴http://jsfiddle.net/7kuX9/1/

为了更清楚一点，最后一行可以写成

c1=new DeferredAjax( {country:"US"} );
c2=new DeferredAjax( {country:"CA"} );
c3=new DeferredAjax( {country:"MX"} );

$.when( c1 ).then( function() {c2.invoke();} );
$.when( c2 ).then( function() {c3.invoke();} );

有管道

function fireRequest(country) {
        return $.ajax({
            type: "GET",
            url: "wait.php",
            data: {country:country},
            dataType: "JSON",
            success: function(){
                console.log("Successful request for [" + country + "]");
            }
        });
}

var countries=["US","CA","MX"], startingpoint=$.Deferred();
startingpoint.resolve();

$.each(countries,function(ix,country) {
    startingpoint=startingpoint.pipe( function() {
        console.log("Making request for [" + country + "]");
        return fireRequest(country);
    });
});

http://jsfiddle.net/k8aUj/1/

编辑：在结果窗口http://jsfiddle.net/k8aUj/3/

中输出日志的小提琴

每个管道调用都返回一个新的promise，后者又用于下一个管道。请注意，我只提供了sccess函数，应该为失败提供类似的功能。

在每个解决方案中，Ajax调用会延迟到需要时将它们包装在一个函数中，并为列表中的每个项创建一个新的promise以构建链。

我相信自定义对象提供了一种更简单的操作链的方法，但管道可以更好地满足您的口味。

注意：自jQuery 1.8起，deferred.pipe()已弃用，deferred.then将替换它。

Answer 2

注意：从jquery 1.8开始，您可以使用.then代替.pipe。 .then函数现在返回一个新的promise，.pipe已弃用，因为不再需要它。有关promises的更多信息，请参阅promises spec;如果没有jquery依赖关系，请参阅q.js更清晰的javascript promises库。

countries.reduce(function(l, r){
  return l.then(function(){return getData(r)});
}, $.Deferred().resolve());

如果您想使用q.js：

//create a closure for each call
function getCountry(c){return function(){return getData(c)};}
//fire the closures one by one
//note: in Q, when(p1,f1) is the static version of p1.then(f1)
countries.map(getCountry).reduce(Q.when, Q());

原始答案：

另一根烟斗;不是为了胆小的人，而是为了更紧凑：

countries.reduce(function(l, r){
  return l.pipe(function(){return getData(r)});
}, $.Deferred().resolve());

Reduce documentation可能是开始理解上述代码如何工作的最佳位置。基本上，它需要两个参数，一个回调和一个初始值。

回调在数组的所有元素上迭代应用，其中第一个参数是前一个迭代的结果，第二个参数是当前元素。这里的诀窍是getData()返回jquery deferred promise，管道确保在当前元素上调用getData之前，前一个元素的getData完成。

第二个参数$.Deferred().resolve()是已解决的延迟值的惯用语。它被送到回调执行的第一次迭代，并确保立即调用第一个元素上的getData。

Answer 3

我不确定您为什么要这样做，但保留一份您需要请求的所有网址的列表，并且在调用success函数之前不要请求下一个网址。 I.E.，success会有条件地拨打deferred。

Answer 4

我知道我迟到了，但我相信你原来的代码很好但有两个（也许是三个）问题。

由于您对管道参数的编码方式，您的getData(country)会立即被调用。您拥有它的方式，getData()正在立即执行，结果（ajax的承诺，但http请求立即开始）作为参数传递给pipe()。因此，您不是传递回调函数，而是传递一个对象 - 这会导致管道的新延迟被立即解析。

我认为需要

deferred.pipe(function () { return getData(country); });

现在它是一个回调函数，将在解析管道的父延迟时调用。以这种方式编码会引发第二个问题。在解析主延迟之前，所有getData（）都不会执行。

潜在的第三个问题可能是因为你的所有管道都会被延迟连接到主设备，你实际上并没有链条，我想知道它是否可以同时执行它们。文档说回调按顺序执行，但由于你的回调返回一个promise并运行async，它们可能仍然会并行执行。

所以，我认为你需要这样的东西

var countries = ["US", "CA", "MX"];
var deferred = $.Deferred();
var promise = deferred.promise();

$.each(countries, function(index, country) {
    promise = promise.pipe(function () { return getData(country); });
});

deferred.resolve();

Answer 5

我在jQuery队列方面取得了成功。

$(function(){
    $.each(countries, function(i,country){
      $('body').queue(function() {
        getData(country);
      });
    });
});

var getData = function(country){
  $.ajax({
    url : 'ajax.jsp',
    data : { country : country },
    type : 'post',
    success : function() {                          
      // Que up next ajax call
      $('body').dequeue();
    },
    error : function(){
      $('body').clearQueue();
    }
  });
};

Answer 6

更新： deferred.pipe已弃用

这是jQuery API中已经记录的很多代码。见http://api.jquery.com/deferred.pipe/

你可以保持管道直到完成所有100个。

或者，我写了一些东西来进行N次调用，并使用所有已调用的数据解析单个函数。注意：它返回的数据不是超级XHR对象。 https://gist.github.com/1219564

如何使用jquery链接ajax调用

6 个答案: