jQuery延迟对象与嵌套的ajax调用

时间:2012-09-05 01:38:35

标签: javascript jquery jquery-deferred promise

我的情况是我的ajax调用必须按特定顺序执行。我在其他情况下使用过jQuery Deferred对象,但似乎无法找到一种方法来使其表现得恰当。

我有一个函数在其生命周期内执行许多ajax个请求。一些请求将在成功回调其他请求期间执行。

我的问题:有没有办法将所有嵌套的延迟对象返回到原来的$.when来电?

一个简化的例子是:

function nestedAjax() {
    $.get("/", function(){
        console.log("First ajax done.");
        $.get("/", function(){
            console.log("Second ajax done.");
        });
    });
};

我正在努力让nestedAjax函数使用$.when()$.done(),如下所示:

$.when(nestedAjax()).done(function(){
    console.log("Complete");
});​

控制台输出读数:

> First ajax done.
> Second ajax done.
> Complete.

我可以返回第一个get来实现这个目标:

> First ajax done.
> Complete.
> Second ajax done.

但显然这不是我要求的。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:14)

实际上非常简单。虽然所有的AJAX调用都是Deferred对象,但我仍然使用一个方法本身。

function nestedAjax() {
    var dfd = $.Deferred();
    $.get("/echo/json/", function(){
        console.log("First ajax done.");
        $.get("/echo/json/", function(){
             console.log("Second ajax done.");
            dfd.resolve();
        });
    });

    return dfd.promise();
};

答案 1 :(得分:6)

您实际上并不需要额外的延迟对象。你可以通过then()链接来做你想做的事:

function nestedAjax() {
    return $.get("/echo/json/").then(function(result1){
        console.log("First ajax done.");
        if (result1) {
            return result1;
        } else {
            return $.get("/echo/json/").then(function(nestedResult){
                console.log("Second ajax done.");
                return nestedResult;
            });
        }
    });
};

我添加了一些逻辑,因为我认为这可能是您同步执行此操作的原因。之后,您可以像$.when一样使用结果:

$.when(nestedAjax(), $.get("/something/else")).then(function(nested, other) {
    console.log("Complete.", nested, other);
});

答案 2 :(得分:1)

由于某种原因,无法在上述答案中添加评论。

所以我在这里添加我的评论。上述答案仅在ajax调用很快并且在返回dfd.promise()之前返回时才有效。

我有同样的问题。正如你所看到的那样。返回的延迟对象声明它处于“挂起”状态: http://jsfiddle.net/BtEKa/