jquery.when完成后不起作用:它立即执行

时间:2013-04-10 20:00:47

标签: jquery .when

我在jQuery 1.7中编写了这个代码:

$.when($.ajax({
    type: "GET",
    url: internalOrderServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveInternalOrderSuccess, this),
    error: $.proxy(this.retrieveInternalOrderError, this)
}), $.ajax({
    type: "GET",
    url: rejectionReasonServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveRejectionReasonSuccess, this),
    error: $.proxy(this.retrieveRejectionReasonError, this)
})

).done(

$.ajax({
    type: "GET",
    url: salesOrderInfoServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveServiceItemSuccess, this),
    error: $.proxy(this.retrieveServiceItemError, this)
})

);

然而,在retrieveInternalOrderSuccess和retrieveRejectionReasonSuccess之前执行回调retrieveServiceItemSuccess。 有谁可以告诉我这有什么问题?

我已将代码更改为:

$.when($.ajax({
                            type : "GET",
                            url : internalOrderServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveInternalOrderSuccess, this),
                            error : $.proxy(this.retrieveInternalOrderError, this)
                        }), $.ajax({
                            type : "GET",
                            url : rejectionReasonServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveRejectionReasonSuccess, this),
                            error : $.proxy(this.retrieveRejectionReasonError, this)
                        })).done(function() {
                            $.ajax({
                                type : "GET",
                                url : salesOrderInfoServiceURL,
                                contentType : "application/json; charset=utf-8",
                                dataType : "json",
                                success : $.proxy(this.retrieveServiceItemSuccess, this),
                                error : $.proxy(this.retrieveServiceItemError, this)
                            })
                        });

但是这次,第一个回调retrieveInternalOrderSuccess执行然后第二个回调执行(retrieveRejectionReasonSuccess) - 这两个回调的执行顺序是随机的。但是第三个回调不会执行。 有人可以告诉我哪里错了吗?

我试图添加这个:

var self = this;
                        $.when($.ajax({
                            type : "GET",
                            url : internalOrderServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveInternalOrderSuccess, this),
                            error : $.proxy(this.retrieveInternalOrderError, this)
                        }), $.ajax({
                            type : "GET",
                            url : rejectionReasonServiceURL,
                            contentType : "application/json; charset=utf-8",
                            dataType : "json",
                            success : $.proxy(this.retrieveRejectionReasonSuccess, this),
                            error : $.proxy(this.retrieveRejectionReasonError, this)
                        })).done(function() {
                            $.ajax({
                                type : "GET",
                                url : salesOrderInfoServiceURL,
                                contentType : "application/json; charset=utf-8",
                                dataType : "json",
                                success : function(oResult) {
                                    self.retrieveServiceItemSuccess(oResult);
                                },
                                error : function(oResult) {
                                    self.retrieveServiceItemError(oResult);
                                },
                            })
                        });

这次以正确的顺序调用回调。 任何人都可以澄清这个吗?

2 个答案:

答案 0 :(得分:3)

在传递函数参数之前,始终会对其进行求值。您需要传递函数,这将进行第二次ajax调用。

$.when($.ajax({
    type: "GET",
    url: internalOrderServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveInternalOrderSuccess, this),
    error: $.proxy(this.retrieveInternalOrderError, this)
}), $.ajax({
    type: "GET",
    url: rejectionReasonServiceURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: $.proxy(this.retrieveRejectionReasonSuccess, this),
    error: $.proxy(this.retrieveRejectionReasonError, this)
})

).done(function () {

    $.ajax({
        type: "GET",
        url: salesOrderInfoServiceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: $.proxy(this.retrieveServiceItemSuccess, this),
        error: $.proxy(this.retrieveServiceItemError, this)
    })
}
);

为了使其更具可读性和显而易见性,请考虑将每个.ajax()调用分解为自己的函数:

function firstAjax() { /* ... */}
function secondAjax() { /* ... */}
function thirdAjax() { /* ... */}

$.when(firstAjax, secondAjax).done(thirdAjax);

只需确保各个函数返回$.ajax()返回的值。

答案 1 :(得分:2)

.done需要一个函数来执行,而不是一个promise对象。

.done(function(){

    $.ajax({
        type: "GET",
        url: salesOrderInfoServiceURL,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: $.proxy(this.retrieveServiceItemSuccess, this),
        error: $.proxy(this.retrieveServiceItemError, this)
    })

});

this仍然不在上下文中。