Как запустить код JavaScript в последовательности?

Question

У меня проблема с JavaScript, когда мне нужно запустить и завершить функцию до запуска другой функции.

Вот код, который мне нужно запустить и завершить первым. Как видите, я перебираю все поля ввода адресов в форме и геокодирую их через API Карт Google.

  $('#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.
    });
  });

После того, как это полностью завершится, то есть после того, как все ответы от API Карт Google вернутся, мне потребуется форма для отправки. Вот текущий код отправки ajax, который я использую:

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

Проблема, с которой я столкнулся, заключается в том, что форма отправлена ​​до ответа API Карт Google. Метод 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

Проблема в том, что форму еще можно отправить до того, как все функции Google загрузят свои данные? Затем нам нужно отключить кнопки отправки с самого начала, загрузить все данные, а затем снова включить формы после завершения загрузки.

Uing chetan-sastry * Решение 1004 * для проверки того, когда форма загружена, должно выглядеть примерно так.

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

Answer 3

Я не знаю JQuery, поэтому, пожалуйста, простите меня, если я не в базе, но мне кажется, что вы можете решить вашу проблему, отправив форму внутри обработчика результатов геокодирования (где он говорит // Store the results in a hidden input field.) вместо этого из этого другого обработчика успеха (который я собираю вызывать при успешном выполнении AJAX-запроса?). Что-то мешает вам делать это таким образом?