$ .done（）代碼在$ .when（）之前執行

Question

在我的項目中，我使用2個版本的JQuery.js，因此我使用$.noConflict()解決了最新版本的JQuery到名為jq172的變量的沖突。 現在，我已經使用jq172.when().done()構造來顯示加載狀態圖像，直到所有ajax請求都被完全處理為止。 代碼如下。

jq172.when(
    DisplayPOXOrderStatistics(fromDate, toDate), 
    DisplayPOXCompletedOrdersData(fromDate, toDate),
    DisplayPOXCompletedOrderPieChart(fromDate, toDate),
    DisplayCurrentYearlyTrends())
      .done(function (a1,a2,a3,a4) 
        { 
           $("#loading").hide(); 
        });

jq172.when()中的函數編碼如下，

 function DisplayPOXOrderStatistics(fromDate, toDate) {        
    return $.ajax({
        type: "POST",
        url: '@Url.Action("DisplayPOXOrderStatistics", "Home")',
        dataType: "json",
        data: { FromDate: fromDate, ToDate: toDate },
        success: function (data) {application code.....}
    });        
}
function DisplayPOXCompletedOrdersData(fromDate, toDate) {
    return $.ajax({
        type: "POST",
        url: '@Url.Action("DisplayPOXCompletedOrders", "Home")',
        data: { FromDate: fromDate, ToDate: toDate },
        dataType: "json",
        success: function (data) { some code....}
    });
    }

＆rest 2個函數的編碼方式與上述相同。現在， .done()中隱藏加載圖像潛水的代碼應該在完成所有4個ajax調用之后執行，但是當前，它在分派函數調用后立即執行。 誰能在我的代碼中找出問題所在。 提前致謝...

這是其余2個函數的定義。

function DisplayPOXCompletedOrderPieChart(fromDate, toDate) {
    return $.ajax({
        type: "POST",
        url: '@Url.Action("POXCompletedOrderPieChart", "Home")',
        data: { FromDate: fromDate, ToDate: toDate },
        dataType: "json",
        success: function (data) {
            $('#POXCompletedOrdersPie').empty();
            var dataSet = [];
            var isDataAvailable = false;
            for (var i = 0; i < data.length ; i++) {
                var newElement = { label: data[i].Name, data: parseFloat(data[i].ColumnValue), color: Color[i] };
                dataSet.push(newElement);
                if (newElement.data > 0)
                    isDataAvailable = true;
            }
            if (dataSet.length != 0 && isDataAvailable) {
                $.plot($("#POXCompletedOrdersPie"), dataSet, {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    legend: {
                        show: false
                    }
                });
            }
            else {
                $("#POXCompletedOrdersPie").empty();
                $("#POXCompletedOrdersPie").append("<html><p> <b>" + "@Html.Raw(VirtuOxAdvDME.Dashboard_PieChart_POXCompletedOrder_NoData)" + "</b> </p><html>");
            }
        }
    });        
}

function DisplayCurrentYearlyTrends() {
    $("#DisplayCurrentYear").html($('#selectCurrentYear option:selected').text());
    return $.ajax({
        url: '@Url.Action("DisplayCurrentYearlyTrends", "Home")',
        data: { selectedCurrentYear: $('#selectCurrentYear option:selected').text() },
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            var DataValues = [], TickData = [];
            var i = undefined;
            $.each(data, function (index, item) {
                i = (index + 1) * 2;
                DataValues.push({ data: [i, item.Value], color: Color[i] });
                DataValues.push([i, item.Value]);
                TickData.push([i, item.MonthName]);
            });
            $.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }],
                    {
                        series: { bars: { show: true } },
                        bars: {
                            barWidth: 1.5,
                            align: "center"
                        },
                        xaxis: {
                            ticks: TickData,
                            axisLabelUseCanvas: true,
                            labelAngle: -90,
                        },
                        yaxis: { axisLabelUseCanvas: true },
                        grid: { hoverable: true }
                    });
            $("#CurrentYearlyTrendsBar").UseTooltip();
        }
    });        
}

Answer 1

您的$.ajax調用（來自舊jQuery版本）可能不會返回實現Promise接口的jqXHR對象，該接口是v1.5引入的功能。 when將對象視為純值，然后立即解析。

要解決此問題，請改用jq172.ajax() ，或使用（單個）最新的jQuery並更新您的舊代碼。

Answer 2

這是來自jQuery網站

在多次遞延的情況下，其中一個遞延被拒絕，jQuery.when立即為其主遞延觸發failCallbacks。 請注意，此時可能仍未解決某些延期付款的問題。 如果您需要針對這種情況執行其他處理，例如取消所有未完成的Ajax請求，則可以將對底層jqXHR對象的引用保留在閉包中，並在failCallback中檢查/取消它們。

檢查您的ajax調用，並確保沒有人被拒絕。
您可以在開發者控制台->“網絡”標簽中執行此操作
通常在按F12鍵后即可訪問。

$ .done（）代碼在$ .when（）之前執行

問題描述

2 個解決方案

解決方案1
1 已采納 2013-09-05 09:36:51

解決方案2
0 2013-09-05 07:29:55

$ .done（）代碼在$ .when（）之前執行

問題描述

2 個解決方案

解決方案1 1 已采納 2013-09-05 09:36:51

解決方案2 0 2013-09-05 07:29:55

解決方案1
1 已采納 2013-09-05 09:36:51

解決方案2
0 2013-09-05 07:29:55