javascript - 第二个$ .ajax调用被跳过

This question already has answers here:

How do I return the response from an asynchronous call?
                            
                                （38个答案）
                            
                    
                2年前关闭。
        

    

我正在使用Google Maps JavaScript API，并且在用户单击div时尝试更新热图。传递到热图的较长数据来自本地json文件。此刻，我可以使我的网页加载正确显示的地图和热图叠加层。问题是当我单击div并期望热图数据得到更新时，热图会消失。通过调试，我发现在单击监听器中运行$.ajax时，getPoints(file)方法中的getPoints(file)调用会被跳过。有谁知道可能出了什么问题？这是我的代码：

var map, heatmap;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: getPoints("2016-07-02--11-56-24.json"),
        map: map
      });
};

function getPoints(file) {
    retArr = [];
    var weblink = "http://localhost:8080/trips/" + file;
    $.ajax({
        url: weblink,
        dataType:"json",
        success:function(data){
            for(var i = 0; i< data.coords.length; i++){
                console.log(data.coords[i]);
                retArr.push(new google.maps.LatLng(data.coords[i].lat, data.coords[i].lng))
            }
        }
    });
    return retArr;
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        heatmap.set('data', getPoints(v));
    })
})

json数据遵循以下格式：

{
"start_time":some time,
"coords": [{lat,long},{lat,long},{lat,long}],
"end time":some time
}

如果需要更多详细信息，请告诉我，我将更新问题。

谢谢！！！

最佳答案

$.ajax是异步的，这意味着您从getPoints返回的数组将始终为空-异步success函数始终在返回getPoints之后发生。

您需要将代码重新组织为以下内容：

var map;
function initMap() {
    var sanFran = {
        lat: 37.775299,
        lng: -122.432432
    }

    map = new google.maps.Map(document.getElementById('Map'), {
        zoom: 10,
        center: sanFran,
    });
};

function getPoints(file) {
    $.ajax({
        url: `http://localhost:8080/trips/${file}`
        dataType: "json",
        success: rawData => {
            const data = rawData.coords.map(({ lat, long }) =>
                new google.maps.LatLng(lat, lng)
            );
            new google.maps.visualization.HeatmapLayer({
                data,
                map
            })
        }
    });
}
$.each(jsTrips,function(k,v){
    $("#"+k).on("click",function(){
        getPoints(v);
    })
})

警告：未经测试