如何依次運行JavaScript代碼？

Question

我有一個JavaScript問題，我需要一個函數在另一個函數運行之前運行並完成。

以下是我需要先運行並完成的代碼。正如您所看到的，我正在循環顯示錶單中的所有地址輸入字段，並通過Google Maps API對其進行地理編碼。

$('#form input:text.address').each(function() { 
    var address = $(this); 
    var Geocoder = new google.maps.Geocoder(); 

    Geocoder.geocode({ 'address': address.val() }, function(results, status) { 
     // Store the results in a hidden input field. 
    }); 
    }); 

完成此操作後 - 也就是說，在所有來自Google Maps API的響應都返回後 - 我需要提交表單。下面是當前AJAX代碼提交我使用：

$('#form').ajaxForm(
    { 
     success: 
     function() { 
      ... 
     } 
    } 
); 

我遇到的問題是谷歌地圖API迴應之前提交表單。 ajaxForm()方法允許一個beforeSubmit回調函數，但仍然不等待函數完成。我意識到這是因爲JavaScript是異步的，但我不確定如何解決這個特定的問題。

任何幫助表示讚賞！謝謝！

Answer 1

調用從Geocoder.geocode成功處理程序提交的表單。由於您對同一個功能有很多呼叫，請設置一個指示符來指示最後一次呼叫何時完成，然後提交表單。

這裏有一種方法......

var count = $('#form input:text.address').size(); 
$('#form input:text.address').each(function() { 
    var address = $(this); 
    var Geocoder = new google.maps.Geocoder(); 

    Geocoder.geocode({ 'address': address.val() }, function(results, status) { 
     // Store the results in a hidden input field. 
     count--; 
     if (count === 0) { 
      //submit form here! 
     } 
    }); 
    }); 

Answer 2

我不知道JQuery的，所以請原諒我，如果我走了基地，但在我看來，你可以通過提交解決您的問題在地理編碼結果處理程序（它表示// Store the results in a hidden input field.）而不是來自其他成功處理程序（我收集的應該在AJAX查詢成功時應該調用？有什麼阻止你這樣做嗎？

Answer 3

問題是，在所有Google功能加載數據之前，表單仍然可以提交？然後，我們需要從一開始就禁用提交按鈕，加載所有數據，然後在完成加載後再次啓用表單。

Uing chetan-sastry解決方案檢查表單何時加載的東西應該看起來像這樣。

var count = $('#form input:text.address').size(); 

$('#form input:text.address').each(function() { 
    var address = $(this); 
    var Geocoder = new google.maps.Geocoder(); 

    Geocoder.geocode({ 'address': address.val() }, function(results, status) { 
    // Store the results in a hidden input field. 

     count--; 
     if (count === 0) { 
     $('#form').ajaxForm(/* ... */); 
     $('#form input:submit').attr('disabled', '0'); // Enable submit-buttons 
     } 
    }); 
}); 

然後以防止用戶提交表單之前的東西已經被加載，你應該設置頁面加載時提交給殘疾人士。

<input type="submit" disabled="1" />