Javascript：需要处理代码

Question

我想要做的是提交点击事件，我想要地理编码和地址并设置表单的值并通过发送发送这些值。

在以下代码中，警报将测试代码的运行顺序。

我所需要的警报（“2”）和警报（“3”）之前警报（“4”）被处理使得存在可变RESULT1可以具有将由被使用的值警报后的代码（4）。就目前而言，代码按此顺序触发（警报按此顺序弹出）：1,4,2,3。有上线的错误位置：

var testvar = result1.lat(); 

错误是：

Uncaught TypeError: Cannot read property 'lat' of undefined 

这是有意义的，因为＃4寻找RESULT1变量才能由请在geoCoder1（点2被设置）。它也不填充表单域。

$(document).ready(function() { 
    $("#myForm").submit(function() { 

    var address = $("#id_user_entered_address").val(); 
    var geocoder = new google.maps.Geocoder(); 
    var result; 

    alert("point 1"); 

geocoder.geocode({'address': address1}, 
       function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK){ 
     result = results[0].geometry.location; 

     alert("point 2"); 

     } 
    alert("point 3"); 

} ); 


alert("point 4"); 

    var testvar = result.lat(); 
     var testlong = result.lng(); 
    $("#id_latitude").val(testvar); 
    $("#id_longitude").val(testlong); 

    alert("point 5"); 


    }); 

}); 

这么说，我实际上可以使这个正常工作（但它是一个很大的黑客，因为我不希望人们需要点击两个按钮），当我做到以下几点：

创建点击按钮触发地理编码部分的单独功能。

这只留下提交函数中的表单变量（在表单的提交按钮上）的设置。我还必须将结果变量更改为全局（不使用var）。

然后我就提出按一下火的地理编码功能，即完成时，然后我点击提交按钮的形式，和所有的作品，因为它应该（即后数据与形式发送）。见下：

function firstgeocode() { 

    var address = $("#id_user_entered_address").val(); 
    var geocoder = new google.maps.Geocoder(); 


geocoder.geocode({'address': address}, 
       function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK){ 
     result = results[0].geometry.location; 

     alert("inside the geocode: " + result); 
     } 
}); 
}; 


$(document).ready(function() { 

$("#myForm").submit(function() { 

     var latres = result.lat(); 
     var lonres = result.lng(); 

     $("#id_latitude").val(latres); 
     $("#id_longitude").val(lonres); 

     }) 
}); 

我不知道确切的问题是什么的问题和解决方案似乎是一个混合物异步VS在JS同步，回调，关闭和在JS变量的作用域。

我已经尝试设置回调。下面的脚本实际上是正确地进行了地理编码，更改了屏幕上的表单域，我甚至可以使用并提醒打印表单元素值，但发布数据不随表单发送，只有表单的默认值在发帖：

$(document).ready(function() { 

$("#myForm").submit(function() { 

function geothis(callback){ 

var address = $("#id_user_entered_address").val(); 
var geocoder = new google.maps.Geocoder(); 

alert("point1"); 
geocoder.geocode({'address': address}, 
       function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK){ 
     var result = results[0].geometry.location; 

     alert("inside the geocode: " + result); 

     callback(result); 
     } 
}); 

}; 


function setform(result){ 
     var latres = result.lat(); 
     var lonres = result.lng(); 

     $("#id_latitude").val(latres); 
     $("#id_longitude").val(lonres); 

     alert($("#id_longitude").val()); 
alert("point2"); 
}; 


geothis(setform); 

     }); 
}); 

任何想法将不胜感激。

Answer 1

欢迎来到异步编程。您使用回调的方式正确，但您的代码只有在通话完成之后才能提交。因此，您需要取消表单提交，并在Ajax代码返回值设置后提交。

$("#myForm").submit(function(event) { 
    event.preventDefault(); //stop the form submission 

和回调

function setform(result){ 
    var latres = result.lat(); 
    var lonres = result.lng(); 

    $("#id_latitude").val(latres); 
    $("#id_longitude").val(lonres); 

    //$("#myForm").off("submit"); //might need to remove the listener 
    $("#myForm")[0].submit(); //resubmit the form 
}; 

Answer 2

我看到你使用jQuery在这里，所以我会建议使用deferred对象内。

将函数getGeoLocation包装起来，返回一个承诺对象，然后在alert('point3')处解析延迟。对于一个快速的代码段，这将是

function getGeoLocation() { 
    var deferred = new $.Deferred(); 
    geocoder.geocode({'address': address1}, 
    function(results, status) { 
     if(status == google.maps.GeocoderStatus.OK){ 
     result = results[0].geometry.location; 
     alert("point 2"); 
     deferred.resolve(); 
     } 
     alert("point 3"); 
    }); 
return deferred.promise(); 
} 

后再行alert('point4')后，你可以调用函数像的下方，并且.done会在您resolve递延叫：

getGeoLocation().done(function() { 
    var testvar = result.lat(); 
    var testlong = result.lng(); 
    $("#id_latitude").val(testvar); 
    $("#id_longitude").val(testlong); 
    alert("point 5"); 
})