javascript - 如何保存函数调用之间的参数值？

Question

我正在尝试创建一个天气应用程序，向 OpenWeatherMap 发送 Ajax 请求。当我向函数 sendRequest 提供 w.weather 的参数，然后向接下来要调用的函数 displayFunc 提供相同的参数时，我在 w.getWeatherFunc 中遇到错误。

这是我在控制台中得到的内容:

未捕获类型错误:无法读取未定义的属性“天气” 在 displayFunc (weather.js:46) 在weather.js:78

我该如何解决这个问题并使其正常工作？

function Weather () {
    var w = this;

    var weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?'; 
    var appid = '&appid=c0a7816b2acba9dbfb70977a1e537369';
    var googleUrl =  'https://maps.googleapis.com/maps/api/geocode/json?address=';
    var googleKey = '&key=AIzaSyBHBjF5lDpw2tSXVJ6A1ra-RKT90ek5bvQ';

    w.demo = document.getElementById('demo');
    w.place = document.getElementById('place');
    w.description = document.getElementById('description');
    w.temp = document.getElementById('temp');
    w.humidity = document.getElementById('humidity');
    w.getWeather = document.getElementById('getWeather');
    w.addCityBtn = document.getElementById('addCity');
    w.rmCityBtn = document.getElementById('rmCity');
    w.icon = document.getElementById('icon');
    w.wind = document.getElementById('wind');
    w.time = document.getElementById('time');
    w.lat = null;
    w.lon = null;
    w.cityArray = [];
    w.weather = null;

    function sendRequest (url, data) {

        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.send();

        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                    data = JSON.parse(request.responseText);
                    console.log(data);
                    return data;
            } else {
                console.log(request.status + ': ' + request.statusText);
            }
        }

    }

    function displayFunc (obj) {

        console.log('obj ' + obj);
        w.icon.src = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        var timeNow = new Date();
        var hours = timeNow.getHours();
        var minutes = timeNow.getMinutes() < 10 ? '0' + timeNow.getMinutes() : timeNow.getMinutes();
        w.time.innerHTML = hours + ':' + minutes;

        w.place.innerHTML = 'Place: ' +  obj.name;
        w.description.innerHTML = "Weather: " + obj.weather[0].description;
        w.temp.innerHTML = "Temperature: " + w.convertToCels(obj.main.temp) + "°C";
        w.humidity.innerHTML = "Humidity: " + obj.main.humidity + '%';
        w.wind.innerHTML = 'Wind: ' + obj.wind.speed + ' meter/sec';
    }


    w.convertToCels = function(temp) {
        var tempC = Math.round(temp - 273.15);
        return tempC;
    }


    w.getWeatherFunc = function() {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(location){
                w.lat = location.coords.latitude;
                w.lon = location.coords.longitude;

                var url = weatherUrl + 'lat=' + w.lat + '&lon=' + w.lon + appid;

                var result = sendRequest(url, w.weather);
                console.log(result);    
                displayFunc(result);
            });
        } else {
            alert('Browser could not find your current location');
        }
    }


    w.addCityBtn.onclick = function() {
        var newCity = prompt('Please insert city', 'Kiev');

        var gUrl = googleUrl + newCity + googleKey;
        var newCityWeather = null;
        sendRequest(url, newCityWeather);

        var location = newCityWeather.results[0].geometry.location;
        var newUrl = weatherUrl + 'lat=' + location.lat + '&lon=' + location.lng + appid;

        sendRequest(newUrl, w.weather);

            displayFunc(newCity);
            w.cityArray.push(newCity);
        }

    window.onload = w.getWeatherFunc;

    setInterval(function() {
        w.getWeatherFunc();
    }, 900000);

}

Answer 1

您的ajax返回返回到浏览器引擎中。作为异步，您需要创建一个回调:

function sendRequest(url,data,callback){

 //if the data was received
 callback(data);
 }

像这样使用

sendRequest("yoururl",data,function(data){
displayFunc(data);
});