Question

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

由于google.geocoder是一个异步任务（当 $。每个不是）时，我必须使用 setTimeout（）。工作（至少设置500毫秒的延迟时间）。

但这是一种微弱且不令人满意的方法，因为执行与彼此无关，这可能导致未知技术环境中的问题。我确信这应该通过回调来处理。但我没有在这个特定的例子中实现这一点，虽然我阅读并尝试了很多（使用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>

geocoder结果在jQuery $ .each循环和回调中

0 个答案: