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

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 4 年前。

我正在使用 google map javascript api，并尝试在用户单击 div 时更新热图。传递到热图中的经纬度数据来自本地 json 文件。目前，我可以让我的网页加载 map ，并且热图叠加层正确显示。问题是，当我单击 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
}

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

谢谢!!!

Answer 1

$.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);
    })
})

警告:未经测试