javascript - jQuery $.each ループとコールバック内のジオコーダの結果

Question

複数の行 (最大 100) を持つ HTML フォームを提供します。すべての行には、少なくとも住所フィールドがあります。(ボタンで) 実行すると、関数 ( populateFormFieldsWithLocations ) がすべてのスコープを反復処理し、google.gecoder を呼び出して結果を DOM に適用します (非表示の入力)。この後、別の関数 ( convertAndPasteJSON ) が実行されてフォームの値が取得され、シリアル化され、オブジェクトが JSON 構文に文字列化され、コピー領域に貼り付けられます。

google.geocoder は非同期タスクであるため ( $.eachはそうではありません)、現在setTimeout()を使用して 2 番目の関数の実行を少し遅くする必要があります。動作します (少なくとも 500 ミリ秒の最小遅延量を設定する場合)。

しかし、これは脆弱で満足のいくアプローチではありません。なぜなら、実行が互いに関係がないため、未知の技術環境で問題が発生する可能性があるからです。これはcallbackで処理する必要があると確信しています。しかし、この特定の例ではこれを実装できませんでしたが、多くのことを読んで試しましたが (jquery 遅延オブジェクトで遊んだ)、まだわかりません。

誰かがこれを行う方法についての短いヒントを持っていれば、とても親切です...

コード (抜粋):

function populateFormFieldsWithLocations() {

  $.each($('.row'), function() {

    // context
    var scope = $(this);

    // get routeaddress value on each context row
    var address = $('textarea#routeaddress', scope).prop('value');

    ...

    // get geocoder coords and populate form fields 
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var coord = results[0].geometry.location;
          $('input#lat', scope).val(coord.lat());
          $('input#lng', scope).val(coord.lng());
        }
    });    
  });
}

function convertAndPasteJSON() {
  var o = $('.convert-to-json').toObject({mode: 'combine'});
  o = JSON.stringify(o, null, 2);
  $('.convert-to-json-result .result').val(o);
}

// on dom ready
$(function() {

  $('.convert-to-json button').on('click', function(e) {

    // execute collecting data
    populateFormFieldsWithLocations();

    // execute conversion to JSON with a delay
    setTimeout("convertAndPasteJSON()", 500);

  });

});

HTML (抜粋):

<form action="." method="post" class="convert-to-json">

  <div class="row">
    <input type="hidden" name="markers[0].lat" id="lat" />
    <input type="hidden" name="markers[0].lng" id="lng" />

    <div>                               
      <label for="routeaddress">routeaddress</label>
      <textarea name="markers[0].routeaddress" id="routeaddress"></textarea>
    </div>
  </div>

  <!-- ... many more ".rows" ... -->

</form>