第二个 $.ajax 调用被跳过[重复]答案

【问题标题】：Second $.ajax call gets skipped over [duplicate]第二个 $.ajax 调用被跳过[重复]
【发布时间】：2018-12-26 21:36:58
【问题描述】：

我正在使用 google maps javascript api，并尝试在用户单击 div 时更新热图。传入热图中的经纬度数据来自本地 json 文件。目前，我可以让我的网页加载地图，并且热图叠加层正确显示。问题是当我点击一个 div 并期望热图数据得到更新时，热图就消失了。通过我的调试，我发现当我在点击监听器中运行getPoints(file) 时，我的getPoints(file) 方法中的$.ajax 调用被跳过。有谁知道可能出了什么问题？这是我的代码：

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
}

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

谢谢！！！

【问题讨论】：

您是否将$.each... 代码行放在$(dociment).ready.. 中。如果你没有，可能是Div 点击没有得到绑定。尝试将整个代码放入 $(document).ready 函数中。
是的，DOM 响应了点击事件，我在调试时遇到了 getPoints() 中的断点，所以我认为这不是问题
由于 ajax 是异步的，因此您的函数可能会在 ajax 完成您在热图上设置的成功（空白数组）回调之前返回
好的，很好。现在我可以建议您检查网络选项卡是否将您的请求发送到服务器。还可以尝试添加error 回调，就像成功一样。让我知道，以便我可以帮助进一步调试。

标签： javascript json ajax google-maps

【解决方案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);
    })
})

警告：未测试

【讨论】：