Последовательные вызовы 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); 
    } 
    }); 
}