我见过最疯狂的JavaScript行为

Question

我见过最疯狂的JavaScript行为

那是在说些什么.这是基于Maps API v3中的Google地图示例.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Directions</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();

    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function render() {
    var start;

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }

    alert("booga booga");


    var end = '<?= $_REQUEST['destination'] ?>';
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div><div id="map_canvas" style="float:left;width:70%; height:100%"></div> 
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div> 
<script type="text/javascript">render();</script>
</body> 
</html>

Run Code Online (Sandbox Code Playgroud)

在那里看到"警报('booga booga')"？

有了它,这一切都很棒.当我们点击该行来定义var请求时,注释out和var start是未定义的.

当我删除我放在那里的警报以向我展示var start的值时,我发现了这一点,它就退出了工作.如果我要求它提醒我var start的值,它告诉我它是未定义的,但是当我们稍后定义var请求时它有一个有效(和准确!)的值.

我怀疑这是一个计时问题 - 就像异步的东西在我解除警报的那一刻有时间在后台完成.关于解决方法的任何想法？

Answer 1

Nic*_*ver 16

您所假设的是正确的navigator.geolocation.getCurrentPosition()是在您解除该警报时完成的异步调用.要解决此问题,您需要从回调函数或在回调函数中继续工作.为此,重新安排代码在完成时发生,如下所示:

function render() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          var end = '<?= $_REQUEST['destination'] ?>';
          var request = {
              origin:start, 
              destination:end,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }, function() {
          handleNoGeolocation(browserSupportFlag);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation();
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

Poi*_*nty 7

"异步的东西"是对getCurrentPosition的调用.警报占用一些时间,因此调用可以完成并调用设置"start"值的回调.

您可以尝试将整个代码块从您定义"请求"的位置移动到getCurrentPosition的回调中.这会延迟它,直到"开始"肯定设置为可用值.

编辑是的,就像尼克在他的例子中所示.

归档时间：	15 年，4 月前
查看次数：	836 次
最近记录：	15 年，3 月前