JavaScript异步函数: callback not working

Question

我正在尝试从 Javascript 中的异步函数返回结果。

我看到过这个问题:How do I return the response from an asynchronous call? ，我正在尝试实现回调解决方案，但出了问题。

这是我的代码:

function getLocation(callback){
    var lat;
    var long;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position)
                {
                    lat = position.coords.latitude;
                    long = position.coords.longitude;
                }, function()
                {
                    console.log('Please enable geolocation in your browser.');
                });
    } else {
        alert('It seems like geolocation is not enabled in your browser.');
    }
var res = {
        "lat": lat,
        "long": long
};
callback(res);
}

function getEventNearYou(){
    var list = [];
    getLocation(function(obj){
        var lat = obj.lat;
        var long = obj.long;
        $.ajax({
                url : 'http://www.skiddle.com/api/v1/events/search/?api_key=myapikey' + '&latitude=' + lat + '&longitude=' + long + '&radius=800&eventcode=LIVE&order=distance&description=1',
                type : "GET",
                async : false,
                success : function(response) {
                        $(response).find("results").each(function() {
                        var el = $(this);
                        var obj = {
                                    "eventname" : el.find("eventname").text(),
                                    "imageurl" : el.find("imageurl").text(),
                                  }
                        list.push(obj);
                        });
                        } 
                });
        return list;
    });
}

基本上，我想找到我当前的位置，并创建一个到 www.skiddle.com 的 HTTP get 请求来检索该位置附近的事件。

这就是我调用该函数的方式:

var x = getEventNearYou();

但我似乎犯了一个错误，因为我收到了错误的请求错误(lat 和 long 未定义)。

Answer 1

您使用回调的方式破坏了它们的实用性。您仍在以同步风格编写代码。您应该继续引用:How do I return the response from an asynchronous call?

同时，我将重构您的代码以展示它是如何完成的。

1. 根据经验，如果函数内的任何代码使用回调，则该外部函数也需要接受回调作为参数。

2. 如果在回调函数内为变量赋予值，则不会在回调函数外部定义该变量(因为异步代码始终在同步代码之后运行)。

3. 不要使用async: false

function getLocation(callback){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            var res = { "lat": lat, "long": long }; 
            callback(res);
        }, function() {
            console.log('Please enable geolocation in your browser.');
        });
    } else {
        alert('It seems like geolocation is not enabled in your browser.');
    }
}

function getEventNearYou(callback) {
    getLocation(function(pos){
        var lat = pos.lat;
        var long = pos.long;
        $.ajax({
            url: 'http://www.skiddle.com/api/v1/events/search/?api_key=myapikey' + '&latitude=' + lat + '&longitude=' + long + '&radius=800&eventcode=LIVE&order=distance&description=1',
            type: "GET",
            success: function(response) {
                var list = [];
                $(response).find("results").each(function() {
                    var el = $(this);
                    var obj = {
                        "eventname": el.find("eventname").text(),
                        "imageurl" : el.find("imageurl").text(),
                    };
                    list.push(obj);
                });
                callback(list);
            } 
        });
    });
}

然后使用回调函数调用getEventNearYou:

getEventNearYou(function (events) {
    // code which relies on `events` can be called from here
});