javascript - jQuery 排序功能无法正常工作

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_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);
}   

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

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) 函数，并在所有商店添加到数组后对其进行排序？

编辑:

如果我在 sort_stores(stores) 之前放置 alert() ，它就会起作用。

                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
                }
            });
        });
    });
};