javascript - 劝告克服Java语言吊起

This question already has answers here:

How do I return the response from an asynchronous call?

                                （38个答案）



                        How to return value from an asynchronous callback function? [duplicate]

                                （3个答案）


                5年前关闭。




我想我的javascript代码受提升效果的困扰，我想对它进行整理。

我正在通过SOAP提取要在热图上显示的数据，这些数据存储在“ ajax”代码块内的全局变量heatMapData中，然后应对其进行分配
到google.maps.visualization.HeatmapLayer构造函数。
不幸的是，在调用此构造函数时，变量heatMapData为空，
尽管已使用指令heatMapData.push（{location：new google ...）正确初始化了它，但我还是用firebug对其进行了检查。。
这可能是因为悬挂了此变量。
从ajax代码返回后，如何将值保留在heatMapData中？
先感谢您。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Energy Heatmap </title>
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 80% }
      h1 { position:absolute; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"></script>
  	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  </head>
  <body>
    <h1>Energy Heatmap </h1>
    <div id="map-canvas"></div>

    <script>
var heatMapData = new Array();
function loadHeatMapData()
{
    $.ajax
    ({
        type: "GET",
        url: "http://localhost:8080/EnergyManagement-portlet/api/secure/jsonws/sample/get-samples-time-by-name?energyName=EnAssTCU",
        dataType: "jsonp",
        crossDomain: true,
        cache: false,
        success: function(jsonData)
        {

            for (var i = 0; i < jsonData.length; i++)
            {
                var decodedData = JSON.parse(jsonData[i]);
                var lng = decodedData["_longitude"];
                var lat = decodedData["_latitude"];
                var energyIntensity = decodedData["_value"];
                //Here I add values to heatMapData
                heatMapData.push({location: new google.maps.LatLng(lat, lng), weight: energyIntensity});
            }
        }
    })
}

// map center
var myLatlng = new google.maps.LatLng(40.8333333, 14.25);
// map options,
var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
// standard map
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
loadHeatMapData();
var heatMap = new google.maps.visualization.HeatmapLayer({
    data: heatMapData //heatMapData is empty
});

heatMap.setMap(map);

var vehiclePath = [
    new google.maps.LatLng(40.85235, 14.26813),
    new google.maps.LatLng(40.85236, 14.26822),
    new google.maps.LatLng(40.85236, 14.26822),
    new google.maps.LatLng(40.85236, 14.26816),
    new google.maps.LatLng(40.85258, 14.26811),
    new google.maps.LatLng(40.85364, 14.26793),
    new google.maps.LatLng(40.85414, 14.26778),
    new google.maps.LatLng(40.8554, 14.2676),
    new google.maps.LatLng(40.8579, 14.27286),
    new google.maps.LatLng(40.85821, 14.27291),
    new google.maps.LatLng(40.8584, 14.27302),
    new google.maps.LatLng(40.85859, 14.27325),
    new google.maps.LatLng(40.8587, 14.27421),
    new google.maps.LatLng(40.85865, 14.27433),
    new google.maps.LatLng(40.85866, 14.27446),
    new google.maps.LatLng(40.86656, 14.291),
    new google.maps.LatLng(40.86653, 14.29102)

];

var path = new google.maps.Polyline({
    path: vehiclePath,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

path.setMap(map);


</script>
<p id="demo"></p>
  </body>
</html>

最佳答案

您遇到的问题与起吊无关，而与计时无关。

$.ajax调用开始从服务器加载数据的过程，但是当请求未完成时，代码将继续运行。这就是ajax具有回调的原因-您可以在数据返回时对其进行操作，因为它不会立即可用。

因此，在heatMapData成功回调完成之前，您不能使用ajax。将要使用它的代码移动到从该回调调用的函数中。