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() {
          ...
        }
    }
  );

我遇到的问题是表单是在Google Maps 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功能加载数据之前，仍然可以提交表单吗？然后我们需要从一开始就禁用提交按钮，加载所有数据，然后在完成加载后再次启用表单。

使用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" />

如何按顺序运行JavaScript代码？

3 个答案: