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

Question

我有 JavaScript 函数调用 changeMapLocation 函数，其中我想返回变量 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() 创建了一个异步请求，该请求的触发晚于您的return 语句。

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

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() 函数。然后，此方法将阻塞，直到收到响应，完成后，您将通过 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}; 

}