连续的Ajax调用进行了数据交换

Question

我有以下情况。

我使用以下方法进行ajax调用以加载json数据。

// Generic loadJSON
function loadJSON(method, url, callback)
{
    $.ajax({
        type: method,
        url: url,
        jsonpCallback: 'jsonCallback',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function (json) {
            callback(json);
        },
        error: function(e) {
            console.log(e);
        }
    });
}

我设置了以下函数来加载json数据

    loadJSON('GET', 'url/Scripts/data.json?callback=?', function (response)
{
    jsonData = response;
    var returnHighest = getHighestValue("Return");
    var riskHighest = getHighestValue("Risk");
    var returnLowest = getLowestValue("Return");
    var riskLowest = getLowestValue("Risk");
    gauge.max = returnHighest / 100;
    gauge.min = returnLowest / 100;
    gauge2.max = riskHighest / 100;
    gauge2.min = riskLowest / 100;
    //gaugeInput.max = returnHighest / 100;
    // gaugeInput.min = returnLowest / 100;
    // gauge2Input.max = riskHighest / 100;
    //gauge2Input.min = riskLowest / 100;
    loadJSON('GET', 'url/Scripts/data2.json?callback=?', function (response)
    {
        jsonData2 = response;
        CalculateRiskReturnCorrelation();
        gauge.value = GetReturn() / 100;
        $('#returnValue').html("" + (gauge.value*100).toFixed(2) + "%");
        gauge2.value = GetRisk() / 100;
        $('#riskValue').html("" + (gauge2.value * 100).toFixed(2) + "%");
        CalculateRiskReturnCorrelation();
    });

    // Loads JSON to change the alternative fund data
    loadJSON('GET', 'url/Scripts/data3.json?callback=?', function (response) {
        jsonData3 = response;
        // Set gloabl vairables
        alternativeColor = jsonData3.Fund1.Color;
        alternativeName = jsonData3.Fund1.Name;
        alternativeMax = jsonData3.Fund1.Max;
        // Handle possible height change of label
        $('#alternatives-text').html(alternativeName);
        var newTopPos = (($('#alternatives-text').height() - $('#slider_alternatives').height()) / 2) + $('#alternatives-text').position().top;
        $('#alternatives-text').css({ top: newTopPos + "px" });
        $('#slider_alternatives').css({ background: alternativeColor });
        $('#slider_alternatives').slider('option', { min: 0, max: alternativeMax });
        var chart = $('#pie').highcharts();
        chart.series[0].addPoint({ name: alternativeName, y: 0, color: alternativeColor, style: { fontSize: "15px", "text-align": "right" } });
        alternativesSet = true;

    });
});

现在，有时这会正确加载，有时第三个JSON调用会从第二个JSON调用加载数据。不确定这是怎么可能的，因为它们有不同的URL，并且它们的响应函数完全不同并且是自包含的。第二个json调用同时获得一条成功消息和一个错误。

这似乎是一个时间问题，因为它有时起作用，但我看不出反应是如何被混淆的。任何帮助或建议都将不胜感激

Answer 1

我认为就时间而言，一个电话在另一个电话之前返回。在这种情况下，您需要等待每个返回，然后再开始下一个。尝试将ajax调用设置为async： false，如下所示：

// Generic loadJSON
function loadJSON(method, url, callback)
{
  $.ajax({
    type: method,
    url: url,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    async: false,
    success: function (json) {
        callback(json);
    },
    error: function(e) {
        console.log(e);
    }
  });
}