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"); 
})