jQuery排序功能不能正常工作

jQuery sort function not working properly

本文关键字：工作 常工作 排序 功能 能不能 jQuery      更新时间：2023-09-26

根据用户位置和商店位置，我试图找出这两者之间的距离。这是工作的，但我想要的是一个数组的所有值和排序的两个点之间的距离。

我有我的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)函数一次，并排序它当所有的存储被添加到数组?

编辑:

如果我将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);
    }
};

您的排序函数没有任何问题。问题是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
                }
            });
        });
    });
};
相关文章：