javascript - 使用 $.when 从 ajax 方法填充全局变量后出现延迟异常

Question

我有一个加载图表和一些表格的 asp.net 页面。

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

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

当页面加载时，我有一个函数 CalcSummaryStats，它利用这些全局值来计算一些统计数据。

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

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

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

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

在 methodRainSingle 中，我的另一个全局变量已填充。

我的理解是，这意味着一旦两个方法都完成运行(假设包括成功回调)，我的函数 calcData 就会被调用。 calcData 调用 $(document).ready block 之外的另一个名为 CalcSummaryStats 的函数，这就是我的错误发生的地方。

它尝试下面的行

var cM = RainDates[0].getMonth();

但出现此错误

jQuery.Deferred exception: Cannot read property 'getMonth' of undefined TypeError: Cannot read property 'getMonth' of undefined

看来 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() 使用的 Promise，因此 calcData() 立即执行，ajax 调用尚未完成。

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