How can I achieve synchronous like behaviour in javascript?
<pre><code>    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
    });
</code></pre>

<hr>

<pre><code>$(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);
            }
        });
    }
})
</code></pre>

<p>I'm not sure how to solve this problem. The MyGlobal.findRoutes constructor doesn't wait for the response to come back from the directionsService before moving on to the MyGlobal.routeBoxes constructor. Is there an easy way to set up my code so that all processes inside of the MyGlobal.findRoutes constructor finish before moving on? </p>