javascript - 如何在 javascript 中实现类似同步的行为？

Question

    var routeSearch = new MyGlobal.findRoutes({
        originPlaceId: search.placeInputIds.originPlaceId,
        destinationPlaceId: search.placeInputIds.destinationPlaceId,
        directionsService: search.directionsService,
        directionsDisplay: search.directionsDisplay,
        travel_mode: search.travel_mode
    });

    var routeBoxes = new MyGlobal.routeBoxes({
        radius: parseFloat(document.getElementById("radius").value),
        path: routeSearch.grabFirstRoute(),
        map: search.map
    });

<小时/>

$(document).on('ready', function(){
    MyGlobal.findRoutes = function(request){
        var me = this;
        this.response;
        this.grabFirstRoute = function(){
            return this.response.routes[0].overview_path; // first route from directions service response
        };

        if (!request.originPlaceId || !request.destinationPlaceId) {
            return;
        }
        request.directionsService.route({
            origin: {'placeId': request.originPlaceId},
            destination: {'placeId': request.destinationPlaceId},
            travelMode: request.travel_mode
        }, function(response, status){
            if (status === google.maps.DirectionsStatus.OK) {
                me.response = response;
                request.directionsDisplay.setDirections(response);

            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    }
})

我不知道如何解决这个问题。在继续执行 MyGlobal.routeBoxes 构造函数之前，MyGlobal.findRoutes 构造函数不会等待从 DirectionService 返回的响应。有没有一种简单的方法来设置我的代码，以便 MyGlobal.findRoutes 构造函数内的所有进程在继续之前完成？

Answer 1

您可能想要使用某种形式的“promise”来增加语法的优美性并使您的代码更易于推理。但是，坚持您发布的代码，您可以使用回调(这在较大的应用程序中可能会变得很麻烦)来实现类似的功能。演示:

var routeBoxes;

function bootstrapRouteBoxes() {
    routeBoxes = new MyGlobal.routeBoxes({
        // code shortened
    });
}

var routeSearch = new MyGlobal.findRoutes({
    // code shortened
}, function() { bootstrapRouteBoxes(); }); // <-- callback as second arg added

然后让您的 findRoutes 函数处理该回调:

MyGlobal.findRoutes = function(request, callback){
    // code shortened

    request.directionsService.route({
        // code shortened
    }, function(response, status){
        if (status === google.maps.DirectionsStatus.OK) {
            me.response = response;
            request.directionsDisplay.setDirections(response);
            callback(); // <-- new code
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

这不会使事情同步，这是一件好事，因为否则您的应用程序在获取数据时可能会“卡住”。它将确保在其他服务成功返回并调用回调之前不会构建您的routeBoxes。

<小时/>

作为脚注，对于 promise ，您可以使用各种选项。也许不是最好的，但接近您似乎已经使用的库:jQuery promises 。如果您使用 Angular，您还可以查看 the $q documentation 。但这是一个广泛的话题，不一定与你的问题直接相关。进行调查，如果您有具体问题，请返回 SO。