使用$ .when

Question

我有一个asp.net页面，其中加载了图表和一些表。

页面加载后，我从服务器上检索了一些数据并进行了一些ajax调用，如下面的代码所示。

我有两个全局变量，需要填充RainFall和RainDates。

页面加载后，我有一个CalcSummaryStats函数，该函数利用这些全局值来计算一些统计信息。

我的理解（AJAX和Jquery是我的新手）是ajax请求异步运行，因此$ .ajax方法在请求完成之前（因此在成功回调运行之前）返回。

因此，经过阅读后，我可以使用$ .when方法，如下面的行所示，

  

$。when（methodRainCont（），methodRainSingle（））。then（calcData）;

在methodRainCont中绘制图表，并在此函数中同时填充RainDates。

在methodRainSingle中，我的其他全局变量已填充。

我的理解是，这意味着一旦两个方法都完成运行（假定包括成功回调），便会调用函数calcData。 calcData调用$（document）.ready块之外的另一个函数CalcSummaryStats，这是我的错误发生的地方。

它尝试下面的行

  

var cM = RainDates [0] .getMonth（）;

但出现此错误

  

jQuery.Deferred异常：无法读取未定义类型的属性'getMonth'错误：无法读取未定义的属性'getMonth'

所以看来RainDates没有被填充？我以为使用$ .when可以确保在调用calcData之前两个函数都已成功运行？

我的JS文件

// my two global variables
var Rainfall = [];
var RainDates = [];

$(document).ready(function () {

 var $opts = $('#optList');

 $.ajax({
    type: 'GET',
    url: 'api/UserOptions',
    dataType: 'json',
    success: function (codes) {
        $.each(codes, function (i, code) {
            $opts.append('<li id="' + code + '">' + code + '</li>');
        });
    },
    error: function () {
        alert("Error ");
    }
});

 function methodRainCont() {
    $.ajax({
        type: 'GET',
        url: 'api/RainContr',
        dataType: 'json',
        success: function (data) {
            DrawChart(data);
        },
        error: function () {
            alert("Error");
        }
    });
}

function methodRainSingle() {
    $.ajax({
        type: 'GET',
        url: 'api/RainSingle',
        dataType: 'json',
        success: function (data) {
            Rainfall = data;                // setting my global variable values
        },
        error: function () {
            alert("Error");
        }
    });
}


$.when(methodRainCont(), methodRainSingle()).then(calcData);

function calcData()
{        
    var cords = {
        x: {
            min: RainDates[0],
            max: RainDates[RainDates.length - 1]
        }
    };

    CalcSummaryStats(cords);
}


});

Answer 1

您的函数methodRainCont()和methodRainSingle()不会返回$.when()使用的承诺，因此calcData()会立即执行并且ajax调用不会结束。

因此，在这些函数中，将$.ajax({替换为return $.ajax({