Question

在下面的脚本中，尽管两个天气对象都填充了ajax调用中的数据，但updateWeather调用在执行该行之前将它们都显示为未定义。我移动了变量声明，因此它们是全局的，但它们在updateWeather调用之前仍然显示未定义。我错过了什么？我可以不在ajax成功函数中设置变量然后稍后传递吗？ 注意：如果你想测试它，请使用不同的网址，因为这个网址不适用于我的凭据

function getWeatherForecastStationCode() {
var d = new Date();
var parts = d.toString().split(" ");
var dDate = parts[1] + " " + parts[2] + ", " + parts[3];
var ampm;
if (parts[4].split(":")[0] <= 12) {
    ampm = "AM";
} else {
    ampm = "PM";
}
var dtime = parts[4].split(":")[0] + ":" + parts[4].split(":")[1];
var datetime = dDate + " " + dtime + ampm;
alert(datetime);
var weatherStation = "KPBI";  // get from GetWeatherService.svc
var forecastFields = "&fields=periods.maxTempF%2cperiods.minTempF%2cperiods.vaildTime%2cperiods.weather%2cperiods.icon";
var currentFields = "&fields=ob.tempC%2cob.tempF%2cob.icon%2cplace.name%2cplace.state";
var forecastUrlWeatherStation = 'http://api.aerisapi.com/forecasts/' + weatherStation + '?limit=1&client_id=' + AerisClientId + '&client_secret=' + AerisWeatherApiSecret + forecastFields;
var currentUrlWeatherStation = 'http://api.aerisapi.com/observations/' + weatherStation + '?limit=1&client_id=' + AerisClientId + '&client_secret=' + AerisWeatherApiSecret + currentFields;


$.ajax({
    type: "GET",
    url: forecastUrlWeatherStation,
    dataType: "json",
    success: function (json) {
        if (json.success === true) {
            forecastedWeather = {
                weather: json.response[0].periods[0].weather,
                maxTemp: json.response[0].periods[0].maxTempF,
                minTemp: json.response[0].periods[0].minTempF,
                weatherIcon: json.response[0].periods[0].icon,
                obsTime: datetime
            };
        }
        else {
            alert('An error occurred: ' + json.error.description);
        }
    }
});
var location;
$.ajax({
    type: "GET",
    url: currentUrlWeatherStation,
    dataType: "json",
    success: function (json) {
        if (json.success === true) {
            var place = json.response.place.name.split(" ");
            if (place.length === 1) {
               location = place[0].charAt(0).toUpperCase() + place[0].substr(1, place[0].length);
            } else {
               location = place[0].charAt(0).toUpperCase() + place[0].substr(1, place[0].length) + " " + place[1].charAt(0).toUpperCase() + place[1].substr(1, place[1].length) + ", " + json.response.place.state.toUpperCase();
            }
            currentWeather = {
                location: location,
                currentTemp: json.response.ob.tempF
            };
        } else {
            alert('An error occurred: ' + json.error.description);
        }
    }
});   
updateWeather(forecastedWeather,currentWeather);
}

Answer 1

问题是AJAX是异步的（这是“AJAX”中的“A”），因此在从2个ajax调用收到响应之前，对updateWeather的调用正在执行。

然后，执行此操作的方法是在调用updateWeather之前等待所有ajax调用完成。

类似以下内容（未经测试）：

$.when(getForecast(),getCurrent()).done(function(f,c){
  updateWeather(forecastedWeather,currentWeather)
});

function getForecast(){
   return $.ajax({
    type: "GET",
    url: forecastUrlWeatherStation,
    dataType: "json"
    ....
    });   
};

function getCurrent(){
   return $.ajax({
    type: "GET",
    url: currentUrlWeatherStation,
    dataType: "json"
    ....
    });   
};

填充的jquery对象在传递时显示为undefined

1 个答案: