Question

我从PHP获取一些数据，代码一切正常，我的PHP结果是按Likes排序的json列表。

getJson结果：

[{"ref":"2038", "name":"aaa", "likes":"10"}, 
{"ref":"2032", "name":"sss", "likes":"9"},
{"ref":"1875", "name":"off", "likes":"6"},
{"ref":"0087", "name":"mki", "likes":"3"},
{"ref":"1256", "name":"qvb", "likes":"3"},
{"ref":"8754", "name":"dsa", "likes":"2"},
{"ref":"4359", "name":"ety", "likes":"0"},
...]

我的问题是，当我循环结果时，会调用地理定位函数来计算每个成员的距离。似乎不会同时调用地理定位函数，并且列表会混淆。

我的问题是：如何等待地理定位函数计算距离，将结果附加到列表中并继续下一个元素？我正在研究使用promise，但我不确定如何将其用于我的代码。

jQuery的：

    function loadAllMembersData() {

        var url_featured = "https://example.com/BBB?members=all";

        $.getJSON(url_featured, function (result) {
             //10 results
            $.each(result, function (i, field) {
                var ref = field.ref;
                var name = field.name;
                var likes = field.likes;
                var lat = field.lat;
                var lng = field.lng;

console.log(i); //index(i) is fine 0 to 9



                getLocationServices(lat, lng, function (r) {

console.log(i); //index(i) becomes mixed up (2, 3, 0, 6,...) 

                    var displayDistance = r + " miles away";

                    $("#membersList ul").append('<li>' +
                            '<a href="#" class="item-link item-content" style="padding: 0">' +
                            '<div>' + displayDistance + '</div>' +
                            '<div>' + name + '</div>' +
                            '<div>' + likes + '</div>' +
                            '</a>' +
                            '</li>');

                });




            });
        });
    }

Answer 1

我认为你的vars i ， name 和喜欢在内部getLocationServices回调中表现得很奇怪是正常行为。它们是在$ .each回调中定义的外部作用域变量 - 它是getLocationServices回调的外部作用域，但是当回调访问它们时 - 几毫秒之后 - $ .each已经将它们设置为新值在后续迭代中。事实上，我发现你的评论非常奇怪，说我正在混淆，而我希望 i 在回调中总是9，而名称和喜欢 vars是最新的JSON元素。也许你以后会在代码中触及相同的变量，所以当回调访问它们时，它们会以某种方式随机混合？

好吧，如果我理解你的问题，这应该可以解决问题：

function loadAllMembersData() {

    var url_featured = "https://example.com/BBB?members=all";

    $.getJSON(url_featured, function (result) {
         //10 results
        $.each(result, function (i, field) {
            var ref = field.ref;
            var name = field.name;
            var likes = field.likes;
            var lat = field.lat;
            var lng = field.lng;

            console.log(i); //index(i) is fine 0 to 9


        (function( theName , theLikes ){
            getLocationServices(lat, lng, function (r) {

              console.log(i); //This will be fucked up. It's the standard behaviour
              console.log(theName); //But now, this value should be correctly fixed to its outer scope counterpart. 

                var displayDistance = r + " miles away";

                $("#membersList ul").append('<li>' +
                        '<a href="#" class="item-link item-content" style="padding: 0">' +
                        '<div>' + displayDistance + '</div>' +
                        '<div>' + theName + '</div>' +
                        '<div>' + theLikes + '</div>' +
                        '</a>' +
                        '</li>');

            });
        })(name , likes);
        });
    });
}

在每个.each迭代中，您将该项的值作为参数传递给IIFE，因此您不必依赖外部范围变量名称和喜欢的值。

jQuery - getJson等待每个循环内的函数完成后再继续

1 个答案: