javascript - JSON 请求在 jQuery Each 函数中无法正常工作

Question

如果包含 .event 类的每个 div 的值已更改，我将使用下面的代码来检索给定位置的纬度和经度。

我遇到的问题是这段代码只产生两个结果:

• 从一个 JSON 请求返回的值用于每个 lat 和 lon 变量
• 变量 lat 和 lon 保持完全相同，就好像它们保持不变，因此 JSON 值不会被替换。

下面是我正在使用的代码:

    $(".button").click(function(){

            data = "";
            $(".event").each(function(){

                original = $(this).find(".address").data("original");
                location = $(this).find(".address").html();
                lat = $(this).find(".lat").html();
                lon = $(this).find(".lon").html();

                if (original !== location) {

                    $.getJSON( "http://nominatim.openstreetmap.org/search?q="+location+"&format=json&polygon=1&addressdetails=1", function(result) {
                        lat = result[0].lat;
                        lon = result[0].lon;
                    });

                }

                data = data + randomNumber() + ": " + lat + " " + lon + ",";

            });

            $(".data").val(data);
            $(".form").submit();

    });

变量data将包含每个包含类event的div的lat和lon。除非用户更改了地址，否则这些值将保持不变，此时将通过 JSON 请求再次检索它们。

然后应提交表单。

我该如何解决这个问题？谢谢

Answer 1

$.getJSON 是异步的，您无法在回调函数之外引用结果。并且在所有 AJAX 请求完成之前您不想提交表单。

$.getJSON() 返回一个Deferred。您可以将它们全部创建一个数组，并使用 $.when() 来等待它们。

$(".button").click(function() {

  var promises = [];
  var data = "";
  $(".event").each(function() {

    var original = $(this).find(".address").data("original");
    var location = $(this).find(".address").html();
    var lat = $(this).find(".lat").html();
    var lon = $(this).find(".lon").html();

    if (original !== location) {
      promises.push($.getJSON("http://nominatim.openstreetmap.org/search?q=" + location + "&format=json&polygon=1&addressdetails=1", function(result) {
        var lat = result[0].lat;
        var lon = result[0].lon;
        data += randomNumber() + ": " + lat + " " + lon + ",";
      }));

    } else {
      data += randomNumber() + ": " + lat + " " + lon + ",";
    }

  });
  $.when.apply($, promises).done(function() {

    $(".data").val(data);
    $(".form").submit();
  });

});

请注意，data 中值的顺序是不可预测的，因为 AJAX 请求不一定按照发送时的顺序返回。

您还应该养成使用 var(或 ES6 中的 let)将变量声明为本地变量的习惯。