嵌套异步函数答案

【问题标题】：Nested asynchronous functions嵌套异步函数
【发布时间】：2012-10-12 06:08:34
【问题描述】：

我想从客户端获取地理位置，然后按 Ajax 加载位置，然后将它们显示到列表中。

我有函数getGeolocation、loadLocation 和createList。

getGeolocation 和loadLocation 是异步函数，所以我需要回调或使用延迟对象。我在互联网上搜索了几个小时，但我仍然不明白如何处理这个问题的语法。

我知道可以在success 函数中调用loadLocations 和在afterResponse 函数中调用createList，但我想在多个地方调用这个函数，所以它不适合我。

var lat = 0;
var long = 0;
var locations;

getGeolocation();
loadLocations();
createList();

    $('#map').live("pageshow", function() {    
        google.maps.event.trigger(map, 'resize');
    });

function getGeolocation(){    
    console.log("getGeolocation");
    if (navigator.geolocation) {

             // getCurrentPosition ruft die Funktion success auf und übermittelt die Position Werte
             // error wird ausgeführt wenn es einen Fehler beim ermitteln der Position gibt
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert("GeoLocation API ist NICHT verfügbar!");
    }

}

function success(position) {    
    console.log("success");
    lat = position.coords.latitude;
    long = position.coords.longitude;
}

function error(msg) {    
    console.log(typeof msg == 'string' ? msg : "error");
}


function loadLocations(){    
    console.log("loadLocations");
    return $.ajax({
        type: "GET",
        url: "http://www.example.at/api/getLocationsByGeodata_JSON",
        success: afterResponse,
        /*beforeSend: showPreloader,*/
        data: {lat : lat, long: long},
        dataType: 'json'
    });
}

function afterResponse(response_objekt) {    
    console.log("afterResponse");
    console.log(response_objekt['results']);
    locations = response_objekt['results'];
}

【问题讨论】：

你能解释一下`我知道可以在“success”函数中调用“loadLocations”，在“afterResponse”函数中调用“createList”，但我想在许多不同的地方调用这个函数所以它不是我的选择？需要多处调用哪些方法？
例如，我也有“createMap”功能和“showLocation”功能，我想用相同的功能加载位置。
所以当你从createMap()调用loadLocations()时，你不想调用createList()，对吗？

标签： jquery asynchronous nested

【解决方案1】：

我认为你可以使用回调函数来实现这一点

例如：

var lat = 0;
var long = 0;
var locations;

getGeolocation(function(){
    loadLocations().done(function(){
        createList();
    });
});

    $('#map').live("pageshow", function() {    
        google.maps.event.trigger(map, 'resize');
    });

function getGeolocation(successCallback){    
    console.log("getGeolocation");
    if (navigator.geolocation) {

             // getCurrentPosition ruft die Funktion success auf und übermittelt die Position Werte
             // error wird ausgeführt wenn es einen Fehler beim ermitteln der Position gibt
        navigator.geolocation.getCurrentPosition(getCurrentPositionCallback(successCallback), error);
    } else {
        alert("GeoLocation API ist NICHT verfügbar!");
    }

}

function getCurrentPositionCallback(callback){
    return function (position) {    
        console.log("success");

        if(typeof callback == 'function'){
            callback(position);
        }

        lat = position.coords.latitude;
        long = position.coords.longitude;
    };
}

function error(msg) {    
    console.log(typeof msg == 'string' ? msg : "error");
}


function loadLocations(){    
    console.log("loadLocations");
    return $.ajax({
        type: "GET",
        url: "http://www.example.at/api/getLocationsByGeodata_JSON",
        success: afterResponse,
        /*beforeSend: showPreloader,*/
        data: {lat : lat, long: long},
        dataType: 'json'
    });
}

function afterResponse(response_objekt) {    
    console.log("afterResponse");
    console.log(response_objekt['results']);
    locations = response_objekt['results'];
}

【讨论】：