Question

我有changeMapLocation函数的JavaScript函数调用，其中我想返回变量lat和long1。我在代码中遇到一些问题，在函数调用中返回这两个变量并发出警报。

var sample = changeMapLocation(state);
alert(sample.lat1);
alert(sample.lat2); 

function changeMapLocation(state) {
   var addressval=state;
   var address;
   var url;
   var googleUrl= "http://maps.google.com/maps/api/geocode/json?";
   var  sensor  = "&sensor=false";

   if(addressval != null && addressval !="" && addressval.length!=0) {

      address = "address="+encodeURIComponent(addressval);

      $.ajax({
        url:googleUrl+address+sensor,
        type:"POST",
        dataType:"json",
        success:function(longlatJson) {
           var jsonObj = JSON.parse(JSON.stringify(longlatJson));
           var lat = jsonObj.results[0].geometry.location.lat;
           var long1 = jsonObj.results[0].geometry.location.lng;
           alert(lat);
           alert(long1);
           //var latlng = new google.maps.LatLng(lat,long1);
           //alert(latlng);
        },
        error:function(){alert("unable to conect to google server");}
      });
   }
   return(lat1:lat,lat2:long1); 
}

Answer 1

你有一个更大的问题。您正在调用异步$.ajax()方法，在changeMapLocation()函数返回后将调用其回调函数，因此您的函数将无法正常工作。请按照以下示例中的注释进行操作：

function changeMapLocation(state) {
   var lat;
   var long1;
   // Since the $.ajax() method is using the asynchronous XMLHttpRequest, it 
   // will not block execution, and will return immediately after it is called,
   // without waiting for the server to respond.
   $.ajax({
      url: 'url-here',
      type: 'POST',
      success: function(longlatJson) {
         // The code here will be executed only when the server returns
         // a response to the ajax request. This may happen several 
         // milliseconds after $.ajax() is called.
         var jsonObj = JSON.parse(JSON.stringify(longlatJson));
         lat = jsonObj.results[0].geometry.location.lat;
         long1 = jsonObj.results[0].geometry.location.lng;
         // Now lat and long1 are set, but it is too late. Our 
         // changeMapLocation() function will have already returned.
      }
   });
   // This part will be reached before the server responds to the asynchronous
   // request above. Therefore the changeMapLocation() function returns an  
   // object with two properties lat1 and lat2 with an undefined value.
   return {lat1: lat, lat2: long1};
}

您应该考虑重构代码，使得处理ajax响应的逻辑位于success回调中。例如：

function changeMapLocation(state) {
   $.ajax({
      url: 'url-here',
      type: 'POST',
      success: function(longlatJson) {
         var jsonObj = JSON.parse(JSON.stringify(longlatJson));
         var lat = jsonObj.results[0].geometry.location.lat;
         var long1 = jsonObj.results[0].geometry.location.lng;

         // Update your map location in here, or call a helper function that
         // can handle it:
         myGoogleMap.setCenter(new google.maps.LatLng(lat, long1));
      }
   });
}

请注意changeMapLocation()不再返回任何内容。当服务器响应Ajax请求时，它将自行更改映射位置。

另请注意，您的lat和long1变量包含在success内部函数的范围内，无法从外部函数访问。

Answer 2

将它们全部包裹在一个对象中并返回该对象：

var result = {
    lat:lat,
    long:long1
}

return result;

然后，在你的函数调用中：

var result = functionName();
alert("lat: " + result.lat + "\n" + "long: " + result.long);

Answer 3

您只能返回一个值。该值可以是对象，但语法使用{}而非()。

异步JavaScript和XML 异步。就调用函数而言，它是火和忘记，你不能从它返回一个值。

您的回调必须完成任务，它无法将数据返回以完成任务。

Answer 4

稍微长一点的版本更具可读性

function getValues()
{
  var r = {};
  r.lat = 22;
  r.lat2 = 33;

  return r;
};


var x = getValues();
alert(x.lat);
alert(x.lat2);

Answer 5

要返回多个值，您需要创建一个对象。

return({
   lat1:  lat,
   lat2:  long1
});

除此之外，此代码也不起作用，因为$.ajax()会创建一个 asychronous 请求，该请求的触发时间晚于return statement。

所以你需要调用自己的回调。像

function changeMapLocation(state, cb){
    $.ajax({
         // much data
         success: function(longlatJson) {
             // do a lot of things
             if(typeof cb === 'function')
                cb.apply(null, [lat, long1]);
         }
    });
}

然后将其称为

changeMapLocation("foobar", function(lat, long1){
     alert(lat);
     alert(long1);
});

Answer 6

正如其他答案所述，使用异步调用，在Ajax调用之后不会立即获取值，因为ajax调用不会完成。所以你得到的值是未定义的。您有两种选择：

选项1：

将您执行的操作与ajax的返回值一起移动到ajax调用的成功回调函数中。请参阅jAndy或Daniel Vassallo的回答。

选项2：（async：false）

您可以通过为ajax()功能设置选项async: false来使呼叫同步。然后，此方法将阻塞，直到收到响应，并且当它完成时，您将通过Ajax初始化值。

使用第二个选项，您的代码将如下所示：

function changeMapLocation(state) { 
//  var addressval = $("#address").val(); 
var addressval=state; 
var address; 
var url; 
var googleUrl= "http://maps.google.com/maps/api/geocode/json?"; 
var  sensor  = "&sensor=false"; 
var lat;
var long1;

if(addressval != null && addressval !="" && addressval.length!=0) { 

    address = "address="+encodeURIComponent(addressval); 

    $.ajax({ 
    url:googleUrl+address+sensor, 
    type:"POST",
    async: false, 
    dataType:"json", 
    success:function(longlatJson) { 

        var jsonObj = JSON.parse(JSON.stringify(longlatJson)); 
        lat = jsonObj.results[0].geometry.location.lat; 
        long1 = jsonObj.results[0].geometry.location.lng; 
        alert(lat); 
        alert(long1); 
        //var latlng = new google.maps.LatLng(lat,long1); 
        //alert(latlng); 

    }, 
    error:function(){alert("unable to conect to google server");} 
    }); 
} 
return {lat1:lat,lat2:long1}; 

}

如何从JavaScript函数中获取多个返回值

6 个答案: