0

我提供了一个包含多行（最多 100 行）的 HTML 表单。每行至少包含一个地址字段。在执行时（通过按钮），函数（populateFormFieldsWithLocations）迭代每个范围，调用 google.gecoder 并将结果应用到 DOM（隐藏输入）。在此之后，执行另一个函数（convertAndPasteJSON）来获取表单值、序列化它们、将对象字符串化为 JSON 语法并将其粘贴到复制区域。

由于 google.geocoder 是一个异步任务（而$.each不是），因此我必须使用setTimeout()减慢第二个函数的执行速度。有效（当设置至少 500 毫秒的最小延迟量时）。

但这是一种弱且不令人满意的方法，因为执行彼此之间没有关系，这可能会在未知的技术环境中导致问题。我确信这应该通过回调来处理。但是我没有在这个特定的例子中实现这一点，尽管我阅读并尝试了很多（玩 jquery deferred objects） - 我仍然不明白。

如果有人有一些简短的提示可能会如何做到这一点，这将非常友好......

代码（摘录）：

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>
4

0 回答 0