为什么 JSON 输出乱序？

Question

我正在尝试获取 8 个地点的天气信息列表。我正在使用一个天气 API，它接受经度和纬度，并返回 json 输出以及该位置的天气信息。我按照 0->7 的顺序输入坐标，但是当 json 处理数据时，它会以看似随机的顺序返回。我认为这是因为某些进程比其他进程更快，并且 json 正在输出它获取的内容。输出是正确的，只是顺序错误。

var loc = null;
var body = "";
var campuses = new Array(8);
campuses[0] = "34.47242,-84.42489,1";
campuses[1] = "33.81488,-84.62048,2";
campuses[2] = "34.27502,-84.46976,3";
campuses[3] = "33.92987,-84.55065,4";
campuses[4] = "34.03433,-84.46723,5";
campuses[5] = "34.08362,-84.67115,6";
campuses[6] = "33.91124,-84.82634,7";
campuses[7] = "34.10409,-84.51804,8";

function getWeather(campusArray)
{
    body += '<p class="topTitle">Campus Weather</p>';
    var cSplit = new Array();
    cSplit = campusArray.split(',');
    var loc = "http://www.worldweatheronline.com/feed/weather.ashx?q="+cSplit[0]+","+cSplit[1]+"&format=json&num_of_days=2&key=0a05fff921162948110401&callback=?"; 
    $('#content').html('asdf');
    $.getJSON(loc,function(js)
    {
        var data = js.data;
        var humidity = data.current_condition[0].humidity;
        var tempF = data.current_condition[0].temp_F;
        var iconDESC = data.current_condition[0].weatherDesc[0].value;
        var iconURL = data.current_condition[0].weatherIconUrl[0].value;
        var windDir = data.current_condition[0].winddir16Point;
        var windSpeed = data.current_condition[0].windspeedMiles;
        var tempMaxF = data.weather[0].tempMaxF;
        var tempMinF = data.weather[0].tempMinF;

        body += '<p class="title">'+cSplit[2]+'</p>'+
        '<span class="body">'+tempF+
        ' '+windSpeed+
        '<img src="'+iconURL+'" /></span>';
        $('#content').html(body);
    });
}
getWeather(campuses[0]);
getWeather(campuses[1]);
getWeather(campuses[2]);
getWeather(campuses[3]);
getWeather(campuses[4]);
getWeather(campuses[5]);
getWeather(campuses[6]);
getWeather(campuses[7]);

我也尝试过 $.ajax

var loc = null;
var body = "";
var campuses = new Array(8);
campuses[0] = "34.47242,-84.42489,1";
campuses[1] = "33.81488,-84.62048,2";
campuses[2] = "34.27502,-84.46976,3";
campuses[3] = "33.92987,-84.55065,4";
campuses[4] = "34.03433,-84.46723,5";
campuses[5] = "34.08362,-84.67115,6";
campuses[6] = "33.91124,-84.82634,7";
campuses[7] = "34.10409,-84.51804,8";

function getWeather(campusArray)
{
    body += '<p class="topTitle">Campus Weather</p>';
    var cSplit = new Array();
    cSplit = campusArray.split(',');
    var loc = "http://www.worldweatheronline.com/feed/weather.ashx?q="+cSplit[0]+","+cSplit[1]+"&format=json&num_of_days=2&key=0a05fff921162948110401&callback=?"; 
    $.ajax({
        url: loc,
        async: true,
        dataType: "json",
        success: function(js)
        {
            var data = js.data;
            var humidity = data.current_condition[0].humidity;
            var tempF = data.current_condition[0].temp_F;
            var iconDESC = data.current_condition[0].weatherDesc[0].value;
            var iconURL = data.current_condition[0].weatherIconUrl[0].value;
            var windDir = data.current_condition[0].winddir16Point;
            var windSpeed = data.current_condition[0].windspeedMiles;
            var tempMaxF = data.weather[0].tempMaxF;
            var tempMinF = data.weather[0].tempMinF;

            body += '<p class="title">'+cSplit[2]+'</p>'+
            '<span class="body">'+tempF+
            ' '+windSpeed+
            '<img src="'+iconURL+'" /></span>';
            $('#content').html(body);
        }
    });
}
getWeather(campuses[0]);
getWeather(campuses[1]);
getWeather(campuses[2]);
getWeather(campuses[3]);
getWeather(campuses[4]);
getWeather(campuses[5]);
getWeather(campuses[6]);
getWeather(campuses[7]);

编辑：

json 输出示例：

{ "data": { "current_condition": [ {"cloudcover": "100", "humidity": "93", "observation_time": "04:04 PM", "precipMM": "0.0", "pressure": "1009", "temp_C": "2", "temp_F": "36", "visibility": "8", "weatherCode": "116",  "weatherDesc": [ {"value": "Mist" } ],  "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0006_mist.png" } ], "winddir16Point": "WNW", "winddirDegree": "290", "windspeedKmph": "7", "windspeedMiles": "4" } ],  "request": [ {"query": "Lat 34.47 and Lon -84.42", "type": "LatLon" } ],  "weather": [ {"date": "2011-01-06", "precipMM": "9.3", "tempMaxC": "7", "tempMaxF": "45", "tempMinC": "2", "tempMinF": "35", "weatherCode": "113",  "weatherDesc": [ {"value": "Sunny" } ],  "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png" } ], "winddir16Point": "WNW", "winddirDegree": "293", "winddirection": "WNW", "windspeedKmph": "20", "windspeedMiles": "13" }, {"date": "2011-01-07", "precipMM": "0.0", "tempMaxC": "6", "tempMaxF": "44", "tempMinC": "0", "tempMinF": "31", "weatherCode": "116",  "weatherDesc": [ {"value": "Partly Cloudy" } ],  "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png" } ], "winddir16Point": "WNW", "winddirDegree": "286", "winddirection": "WNW", "windspeedKmph": "25", "windspeedMiles": "16" } ] }}

Answer 1

您需要将正在使用的 getJSON 回调修改为递归：

var loc = null, body = "", var campuses = [
    "34.10409,-84.51804,8", "33.91124,-84.82634,7", "34.08362,-84.67115,6",
    "34.03433,-84.46723,5", "33.92987,-84.55065,4", "34.27502,-84.46976,3",
    "33.81488,-84.62048,2", "34.47242,-84.42489,1"
]; // notice they are sorted backwards

function getWeather(campusArray) {
    var cSplit = [], loc;
    body += '<p class="topTitle">Campus Weather</p>';

    cSplit = campusArray.pop().split(',');  // popping the array removes it
                                            // from the length

    /* truncated for brevity.  Put your additional code here. */

    $.getJSON(loc, function(js) {
        /* truncated for brevity.  Put your code here. */
        if (campusArray.length) {
              getWeather(campusArray);
        }
    });
}
getWeather(campuses);

Answer 2

您可以使用 Ajax 方法并指定 async: false, 这将导致每个调用被阻止。另一种方法是为每个校园结果设置占位符，并在返回结果时替换每个占位符，您需要扩展 getWeather 方法以接受目标元素，但这意味着您仍然可以使用异步 Ajax 方法对您的用户来说会更好。