Question

虽然是一位经验丰富的程序员，但我注意到使用HTML / Javascript。我在下面发布了我的代码。我想做什么但未能做到的是：

延迟执行refreshmap()（例如延迟500毫秒）。我放入了setTimeout函数，但它似乎没有任何延迟，即使值很大。
获取正确的输出。目前，在for循环的每次迭代后，distance和duration在打印结果中更新，但纬度/经度数据永远不会（参见附件输出）。

Html部分：

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Driving Distances and Times dataset creator</title> 
<script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;white-space:pre-wrap;"> 

<form action="#" onsubmit="setRequest(); return false;" style="white-space:normal;">
<p>
Origin:
<input type="text" name="address1" value="Chicago" />
</p>
<p>
Latitude 1:
<input type="number" name="beginLat" value="35" />
Longitude 1:
<input type="number" name="beginLong" value="-80" />
</p>
<p>
Latitude 2:
<input type="number" name="endLat" value="40" />
Longitude 2:
<input type="number" name="endLong" value="-90" />
</p>
<p>
Divisions per side:
<input type="number" name="divisions" value="1" />
<input type="submit" value="Search" />
</p>
</form>
<p id="results"></p>
<div id="map" style="width: 400px; height: 300px;"></div>

Javascript定义：

<script type="text/javascript"> 
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {zoom:7,mapTypeId: google.maps.MapTypeId.ROADMAP}

var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);

var request = {origin: 'Chicago', destination: 'New York', travelMode: google.maps.DirectionsTravelMode.DRIVING};

从HTML表单中获取数据：

function setRequest(msg) {
    var address1 = document.forms[0].elements[0].value;
    var lat1 = document.forms[0].elements[1].value;
    var long1 = document.forms[0].elements[2].value;
    var lat2 = document.forms[0].elements[3].value;
    var long2 = document.forms[0].elements[4].value;
    var ndiv = document.forms[0].elements[5].value;

    request.origin = address1;
    var k = 0;

    if (lat1>lat2) {
        var temp = lat2;
        lat2 = lat1;
        lat1 = temp;
    }


    if (long1>long2) {
        var temp = long2;
        long2 = long1;
        long1 = temp;
    }

    if (ndiv < 1) {
        ndiv = 1;
    }

    dlat = (lat2-lat1)/ndiv;
    dlong = (long2-long1)/ndiv;

    initial = 0;

    for (var i = 0; i < ndiv; i++) { 
        for (var j = 0; j < ndiv; j++) { 
            latitude = parseFloat(lat1) + dlat*0.5 + dlat*i;
            longitude = parseFloat(long1) + dlong*0.5 + dlong*j;
            request.destination = "" + latitude + "°, " + longitude + "°";
            setTimeout(refreshmap(),500);
        }
    }
};

解决旅行时间并显示：

function refreshmap() {
    directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

        if (initial == 0) {
            var lat1 = latitude - 0.5*dlat;
            var lat2 = latitude + 0.5*dlat;
            var long1 = longitude - 0.5*dlong;
            var long2 = longitude + 0.5*dlong;
            var outstring = "" + latitude + ", " + longitude + ", " +     response.routes[0].legs[0].distance.value + ", " + response.routes[0].legs[0].duration.value     + ", " + lat1 + ", " + long1 + ", " + lat2 + ", " + long2;

            document.body.appendChild(document.createTextNode(outstring +     String.fromCharCode(13,10)));

        }

        directionsDisplay.setDirections(response);

    }
});
};

var initial = 1;
var lat,long,dlat,dlong = 0;
refreshmap();
</script> 
</body> 
</html>

输出：

39.375, -88.75, 1184906, 39431, 38.75, -87.5, 40, -90
39.375, -88.75, 925474, 31504, 38.75, -87.5, 40, -90
39.375, -88.75, 834733, 27469, 38.75, -87.5, 40, -90
39.375, -88.75, 838895, 28560, 38.75, -87.5, 40, -90
39.375, -88.75, 1021536, 35325, 38.75, -87.5, 40, -90
39.375, -88.75, 776387, 26518, 38.75, -87.5, 40, -90
39.375, -88.75, 665551, 22838, 38.75, -87.5, 40, -90
39.375, -88.75, 627540, 21552, 38.75, -87.5, 40, -90
39.375, -88.75, 844986, 29534, 38.75, -87.5, 40, -90
39.375, -88.75, 663110, 21951, 38.75, -87.5, 40, -90

提前感谢任何有用的提示！

在被困在这里之后，我尝试了另一种方法，让javascript只查找一个位置，通过python脚本中设置的url参数提供给它。这样，我知道输出将是唯一的，我可以延迟我想要的一切。我被这种方式卡住了从更新页面读取输出。即使使用ghost.py和<div>标签，我也无法获取更新的信息。这仍然是一条更好的追求途径吗？我想通过每次显示地图来遵守服务条款。

Answer 1

setTimeout(refreshmap(),500);

在这里，您直接调用该函数，并将调用结果传递给setTimeout()。相反，您需要将函数传递给setTimeout。像这样：

setTimeout(refreshmap, 500);

对于不熟悉函数式语言的人来说，这可能有点陌生。

您可以查看setTimeout() documentation以获得进一步说明。

Answer 2

好的，正在发生的是它正在延迟通话，然后使用最后一组纬度和经度。那是因为你正在使用全局变量，变量在refreshMap被实际调用之前发生了变化。

您应该做的是将setTimeout(refreshmap(), 500)行更改为：

setTimeout(function() {
    refreshmap(latitude, longitude);
}, 500);

然后将refreshmap函数更改为：

function refreshmap(latitude, longitude){...}

您可能还必须包含其他变量。

HTML问题中的Javascript - 延迟和更新

2 个答案: