Question

根据用户位置和商店位置，我试着弄清楚这两者之间的距离。这是有效的，但我想要的是一个包含所有值的数组，并对两点之间的距离进行排序。

我有add_stores_to_array函数，它在循环遍历JSON文件时将所有商店添加到数组stores。

add_stores_to_array = function(position) {
    var user_latitude = position.coords.latitude;
    var user_longitude = position.coords.longitude;

    $.getJSON('/stores').done(function(data) {

        $.each(data.features, function(i, item) {
            var store_latitude = item.geometry.coordinates[1];
            var store_longitude = item.geometry.coordinates[0];

            var user = new google.maps.LatLng(user_latitude, user_longitude);
            var store = new google.maps.LatLng(store_latitude, store_longitude);

            var directionsService = new google.maps.DirectionsService();

            var request = {
                origin:user,
                destination:store,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    var response = Math.ceil(response.routes[0].legs[0].distance.value / 1000);

                    // add distance and store id to the array stores
                    stores.push({distance: response, id: item.properties.Nid});
                }
            });
        });

        // call the sort function
        sort_stores(stores);

        console.log(stores);

    });
};

$.each之后我调用了sort函数。但是在将其记录到控制台后，它仍然没有排序。

我的sort_stores功能：

sort_stores = function(stores){
    stores.sort(function(a, b){
        return a.distance - b.distance;
    });
};

首先我认为它不起作用，因为$.each仍然在运行，但在添加此代码后，它仍然无法正常工作：

if (i == Object.keys(data.features).pop()) {
    sort_stores(stores);
}

所以，我尝试了不同的东西。我在sort_stores(stores)。{/ p>中调用$.each函数

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        var response = Math.ceil(response.routes[0].legs[0].distance.value / 1000);

        stores.push({distance: response, id: item.properties.Nid});
        sort_stores(stores);
    }
});

它的工作原理..数组根据数组中的值距离进行排序。但是现在他在每个添加商店之后对阵列进行排序......不是很有效。

是否有正确的方法可以一次调用sort_stores(stores)函数，并在将所有商店添加到数组时对其进行排序？

修改

如果我在alert()之前放置sort_stores(stores)它正在运作..

                if (status == google.maps.DirectionsStatus.OK) {
                    var response = Math.ceil(response.routes[0].legs[0].distance.value / 1000);

                    stores.push({distance: response, id: item.properties.Nid});
                }
            });
        });

        alert('Call the sort_stores(stores) function after the $.each, with an alert.. it is working?');
        sort_stores(stores);
    });
};

编辑2：

通常我从这里调用函数add_stores_to_array？

get_user_location = function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(add_stores_to_array);
    }
};

Answer 1

您的排序功能没有任何问题。问题是directionsService.route是异步调用，即使所有调用尚未完成，其余代码也会运行。

您可以使用jQuery.when()。这是新的add_stores_to_array()函数

add_stores_to_array = function(position) {
    var promises = []; //ADDED promise array
    var user_latitude = position.coords.latitude;
    var user_longitude = position.coords.longitude;

    $.getJSON('/stores').done(function(data) {
        $.each(data.features, function(i, item) {
            var store_latitude = item.geometry.coordinates[1];
            var store_longitude = item.geometry.coordinates[0];

            var user = new google.maps.LatLng(user_latitude, user_longitude);
            var store = new google.maps.LatLng(store_latitude, store_longitude);

            var directionsService = new google.maps.DirectionsService();

            var request = {
                origin:user,
                destination:store,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            var dfd = directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    var response = Math.ceil(response.routes[0].legs[0].distance.value / 1000);

                    // add distance and store id to the array stores
                    stores.push({distance: response, id: item.properties.Nid});
                }
            });

            promises.push(dfd); //ADDED store each object in array
        });

        //Now you can do the following without having any async issue.
        $.when.apply(null, promises).done(function() { 
           /* sort & do stuff here */ 
           sort_stores(stores);
           console.log(stores);
        });
    });
};

修改

这是另一种方法。由于您需要等到返回所有响应，因此您可以自定义排序功能以检查响应计数。如果它等于total（表示所有调用都已成功完成），则对数组进行排序。

sort_stores = function(stores, responseCount, totalCount ) { if (responseCount == totalCount) { stores.sort(function(a, b){ return a.distance - b.distance; }); } };

然后按如下方式更改add_stores_to_array功能。

add_stores_to_array = function(position) { var user_latitude = position.coords.latitude; var user_longitude = position.coords.longitude; $.getJSON('/stores').done(function(data) { var totalCount = data.features.length; //ADDED Get total count var responseCount = 0; //ADDED $.each(data.features, function(i, item) { var store_latitude = item.geometry.coordinates[1]; var store_longitude = item.geometry.coordinates[0]; var user = new google.maps.LatLng(user_latitude, user_longitude); var store = new google.maps.LatLng(store_latitude, store_longitude); var directionsService = new google.maps.DirectionsService(); var request = { origin:user, destination:store, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { var response = Math.ceil(response.routes[0].legs[0].distance.value / 1000); // add distance and store id to the array stores stores.push({distance: response, id: item.properties.Nid}); responseCount++; //ADDED sort_stores(stores, responseCount, totalCount); //ADDED Call sort function here } }); }); }); };

jQuery排序功能无法正常工作

1 个答案: