jQuery post方法中的变量范围问题[重复]答案

【问题标题】：variable scope issue in jQuery post method [duplicate]jQuery post方法中的变量范围问题[重复]
【发布时间】：2015-07-14 14:49:02
【问题描述】：

我正在尝试从数据库中获取一些信息并用它们制作图表。不幸的是，我用来存储这些值的变量在POST 之外丢失了它们的数据。 completed 和 ongoing 分配在它们的 POST 方法内，也是彼此的 post 方法，但不在它之外。当data2 执行时，变量再次变为empty。我该如何解决这个问题？

var completed;
var ongoing;

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
);

var data2 = [
    {
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: 700, //ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }
]

【问题讨论】：

标签： jquery post scope

【解决方案1】：

这是由于 AJAX 请求是异步的，而不是由于变量范围。有关该问题的完整说明，请参阅this question 中的答案。要解决您特定情况下的问题，您可以在两个 AJAX 调用完成后使用 $.when 回调来创建您的 data2 对象。试试这个：

var completed;
var ongoing;
var requests = [];

requests.push($.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        completed = data;
    }
));

requests.push($.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        ongoing = data;
    }
));

$.when.apply(this, requests).done(function() {
    var data2 = [{
         value: completed,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    },
    {
         value: ongoing,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    }];

    // add further logic which relies on data2 here...
});

请注意，这种方法比嵌套 AJAX 调用更快，因为它们将并行运行，而不是链式运行。因此，用户只会等待最慢的请求。

【讨论】：

【解决方案2】：

这解决了问题：

在 ajax 之前将你的 data2 定义为数组

在第一个函数里面做

function (data) {
    data2.push({
         value: data,
         color: "#46BFBD",
         highlight: "#5AD3D1",
         label: "Completed"
    });
}

这是第二个

function (data) {
    data2.push({
         value: data,
         color: "#FDB45C",
         highlight: "#FFC870",
         label: "Ongoing"
    });
}

【讨论】：

但是你怎么知道两个 AJAX 请求什么时候都完成了，data2 已经填满了所有需要的数据？
所以使用 $.when.apply 方法，如下一个答案所示......似乎很清楚:)

【解决方案3】：

$.post() 是一个 AJAX 调用，它应该是异步的，因此您的 POST 调用对数组创建行没有任何影响，因为它是在 AJAX 完成之前执行的。

var data2 = [];

$.post(
    "/api/EducationCompletionRates?status=1&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[0] = {
            value: completed,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Completed"
        }
    }
);

$.post(
    "/api/EducationCompletionRates?status=2&startDate=20150701&endDate=20150705",
    { data: {} },
    function (data) {
        data2[1] = {
            value: 700, //ongoing,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Ongoing"
        }
    }
);

或者您可以只进行一次 ajax 调用，因为第二次调用总是导致相同的输出。

【讨论】：