时间戳

首页 > 解决方案 > 使用 $.when 从 ajax 方法填充全局变量后的延迟异常

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

问题描述

我有一个加载图表和一些表格的 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);
}


});

标签： javascriptjqueryajax

解决方案

您的函数methodRainCont()并methodRainSingle()没有返回要使用的承诺$.when()，因此calcData()立即执行并且 ajax 调用未完成。

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

推荐阅读