如何依次运行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" />