javascript - 处理许多异步请求

Question

我有一个包含 1000 个 LatLngBounds 对象的数组 var recBounds = [];对于它们中的每一个，我想创建并显示一个矩形，从 Google Elevation Service 获取矩形中心的高程，并根据高程值为矩形着色。

function getElevation() { 
        elevs = [];
        for (i = 0; i < recBounds.length; i++) {
            var elevation;
            var locations = [];
            locations.push(recBounds[i].getCenter());
            var positionalRequest = { 'locations': locations }
            var elevator = new google.maps.ElevationService();
            elevator.getElevationForLocations(positionalRequest, 
            function (results, status) {
                if (status == google.maps.ElevationStatus.OK) {
                    if (results[0]) {
                        elevation = results[0].elevation;
                        elevs.push(elevation);
                        if (recBounds.length == elevs.length) {
                            createRect();
                        }
                    }
                }
            })
        }
    }

(我遍历数组中的每个 LatLngBounds 对象，而不是将整个数组传递给异步函数，因为海拔服务只接受大约 300 个位置。)

问题是海拔服务返回的海拔结果似乎与 recBounds 数组对应的顺序不同。我猜某些缓存位置的高度会立即返回并存储在 elevs 数组的顶部。因此，当我尝试显示矩形时，例如 recBounds[4] 不对应于 elevs[4] 的高度。

我正在尝试将 LatLngBounds 作为参数传递给 getElevationForLocations() 函数，稍后使用它来创建一个具有匹配边界和高程但没有匹配的新数组运气。有什么想法可以实现吗？

Answer 1

如果您提前知道您将获得多少结果，那么与其推送到一个数组，不如让每个函数将其结果放入结果数组中的特定点。

例如:

function getElevation() {
    var elevs = [];
    var locations = [];

    for (i = 0; i < recBounds.length; i++) {
        var elevation;

        locations[i] = recBounds[i].getCenter();

        var positionalRequest = { 'locations': locations };

        var elevator = new google.maps.ElevationService();

        elevator.getElevationForLocations(positionalRequest, (function (index) {
            return function (results, status) {
                if (status == google.maps.ElevationStatus.OK) {
                    if (results[0]) {
                        elevation = results[0].elevation;
                        elevs[index] = elevation;
                        if (recBounds.length == elevs.length) {
                            createRect();
                        }
                    }
                }
            }
        })(i));
    }
}

我没有测试运行代码，但理论上它应该可以工作，或者至少给你一个研究方向。异步调用的结果被包装在另一个函数中，以允许它访问它在循环中的索引。

希望对您有所帮助。