Javascript/jQuery - 在运行其余部分之前等待功能完成

Question

您好，我有一个按钮，当它被点击时会触发一个功能。该函数会做一些事情(对纬度/经度进行反向地理编码)，然后用一个值填充一个隐藏的表单输入。

在执行我需要的其余代码之前，我需要输入具有正确的值，有没有办法做到这一点？目前我有

$('.addButton').click(function() { 
    //first run the reverse geocode to update the hidden location input with the readable address
    reversegeocode();
    var location = $("#location").val();//the value I need
    $.post("<?php echo $this->webroot;?>locations/add", {location:location})
        .done(function (data) {
            $("#locationsHolder").html(data);
        });
});

所以基本上我不想从输入中获取值并通过 AJAX 发布它，直到我知道 reversegeocode() 函数已完成

谁能解释一下我该怎么做。我读过一些关于延期的东西，但我在弄清楚 Javascript 方面完全没用，而且我真的很挣扎。

谢谢

编辑:

这是我的反向地理编码函数

function reversegeocode(){
    var lat = $('#lattitude').val();
    var lng = $('#longitude').val();
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[0]) {//http://stackoverflow.com/questions/8082405/parsing-address-components-in-google-maps-upon-autocomplete-select
              var address_components = results[0].address_components;
              var components={}; 
                jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});})
            var output = '';
            var needAcomma = false;
            if(components.route != undefined) {
                output += components.route;
                needAcomma = true;
            }
            if(components.locality != undefined) {
                if(needAcomma) {
                    output += ', ';
                }
                output += components.locality;
                needAcomma = true;
            }
            if(components.administrative_area_level_1 != undefined) {
                if(needAcomma) {
                    output += ', ';
                }
                output += components.administrative_area_level_1;
                needAcomma = true;
            }else if(components.administrative_area_level_2 != undefined) {
                if(needAcomma) {
                    output += ', ';
                }
                output += components.administrative_area_level_2;
                needAcomma = true;
            }else if(components.administrative_area_level_3 != undefined) {
                if(needAcomma) {
                    output += ', ';
                }
                output += components.administrative_area_level_3;
                needAcomma = true;
            }
            $("#location").val(output);
          } else {
            alert('No results found');
          }
        } else {
          alert('Geocoder failed due to: ' + status);
        }
    });
}

Answer 1

由于 reversegeocode 是一种异步方法，您需要使用基于回调的解决方案。 reversegeocode 应该接收回调方法作为参数，然后在地理编码完成后调用回调。

$('.addButton').click(function () {
    //pass a callback to reversegeocode which will get called once the geocoding is completed
    reversegeocode(function (location) {
        //the callback receives the location as a parameter
        $.post("<?php echo $this->webroot;?>locations/add", {
            location: location
        })
            .done(function (data) {
            $("#locationsHolder").html(data);
        });
    });
});

function reversegeocode(callback) {
    var lat = $('#lattitude').val();
    var lng = $('#longitude').val();
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({
        'latLng': latlng
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) { //http://stackoverflow.com/questions/8082405/parsing-address-components-in-google-maps-upon-autocomplete-select
                var address_components = results[0].address_components;
                var components = {};
                jQuery.each(address_components, function (k, v1) {
                    jQuery.each(v1.types, function (k2, v2) {
                        components[v2] = v1.long_name
                    });
                })
                var output = '';
                var needAcomma = false;
                if (components.route != undefined) {
                    output += components.route;
                    needAcomma = true;
                }
                if (components.locality != undefined) {
                    if (needAcomma) {
                        output += ', ';
                    }
                    output += components.locality;
                    needAcomma = true;
                }
                if (components.administrative_area_level_1 != undefined) {
                    if (needAcomma) {
                        output += ', ';
                    }
                    output += components.administrative_area_level_1;
                    needAcomma = true;
                } else if (components.administrative_area_level_2 != undefined) {
                    if (needAcomma) {
                        output += ', ';
                    }
                    output += components.administrative_area_level_2;
                    needAcomma = true;
                } else if (components.administrative_area_level_3 != undefined) {
                    if (needAcomma) {
                        output += ', ';
                    }
                    output += components.administrative_area_level_3;
                    needAcomma = true;
                }
                $("#location").val(output);
                //call the callback
                callback(output);
            } else {
                alert('No results found');
            }
        } else {
            alert('Geocoder failed due to: ' + status);
        }
    });
}