Javascript范围错误

Question

我目前正在研究Google地图项目并正在实施搜索功能。在我的搜索功能中，我试图在旁边列出哪些搜索制作者刚刚添加到地图中的内容对应于每个大厅。然而，在组装这个字符串时，我遇到了一个问题，如果我不先输入数据，我的side_bar_html变量将不会输出。

这是我的searchMap函数。该变量声明为这样：var side_bar_html = "";

function searchMap(term, map) { 

closeSearch(); 

searchCount = 0; 
searchMarkers = []; 

var request = GXmlHttp.create(); 

    request.open("GET", "admin/search.php?s=" + term, true); 

    request.onreadystatechange = function() { 

    if (request.readyState == 4) { 

     var xmlDoc = GXml.parse(request.responseText); 
     var points = xmlDoc.documentElement.getElementsByTagName("point"); 

     var polygonsToShow = []; 
     for (var i = 0; i < points.length; i++) {         
      var lat = parseFloat(points[i].getAttribute("lat")); 
      var lng = parseFloat(points[i].getAttribute("lng")); 
      var pid = points[i].getAttribute("id"); 
      for(var j = 0; j < polygons.length; j++) { 
       if(polygons[j].vt_bid == pid) { 
        polygonsToShow.push(j); 
       } 
      } 
      var point = new GLatLng(lat,lng);   
      var pname = points[i].getAttribute("name"); 
      var curMarker = createSearchMarker(point, pid, pname,getLetter(i));     
      map.addOverlay(curMarker); 
     } 
     //olays.buildings.checked = false; : Figure out some way to uncheck the buildings overlay checkbox? 
     for(var k = 0; k < polygons.length; k++) { 
      polygons[k].hide(); 
     } 

     for(var l = 0; l < polygonsToShow.length; l++){ 
      polygons[polygonsToShow[l]].show(); 
     } 
    } 
} 

request.send(null); 
alert(side_bar_html); //side_bar_html will be empty unless I alert the variable 


searchResults = new HtmlControl('<div style="background-color:white; border:solid 1px grey; padding:2ex; overflow:auto; width:125px; margin:1px; font-size:14px;"><img align="right" style="cursor: pointer;" src="http://www.thebort.com/maps/images/close.gif" onclick="closeSearch()"><strong>Search</strong><br/>' + side_bar_html + '</div>', {selectable:true}); 
map.addControl(searchResults, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 70))); 

} 

和函数来创建搜索标记：

function createSearchMarker(point, id, pname, letIcon) { 
    var marker = new GMarker(point,letIcon); 
    GEvent.addListener(marker, "click", function() {   
     marker.openInfoWindowHtml('<a href="#" onclick=\'tb_show("' + pname + '","admin/get_info.php?b=' + id + '&KeepThis=true&TB_iframe=true&height=400&width=600",false); return false;\'>' + pname + '</a>'); 

    }); 

side_bar_html = side_bar_html + '<a href="javascript:clickSearch(' + searchCount + ')">' + String.fromCharCode("A".charCodeAt(0) + searchCount) + ': ' + pname + '</a><br>'; 
marker.vt_id = id; 
    searchMarkers.push(marker); 
searchCount++; 

    return marker; 
} 

我想保持代码曝光这个项目至少现在这样如果有什么需求阐述请让我知道。谢谢！

Answer 1

所以我对你的问题的理解是，side_bar_html是onreadystatechange函数调用期间设置的，但你看不到它，除非你提醒它被设置。

以下是可能发生的情况：Ajax请求需要一些时间才能发生。当你打电话req.send(null)然后启动请求，但你的onreadystatechange函数将不会被调用，直到你的Web浏览器发出请求并获得响应后的某个时间。

因此，当您立即尝试使用side_bar_html值时，它不起作用，因为响应尚未返回。但是，当您提醒该值时，执行警报所需的时间会使浏览器有时间得到响应，并适当设置值side_bar_html。

您的根本问题是，Ajax是异步的（这是A的来源），并且您试图同步使用它（意味着您认为事情总是以特定顺序发生）。您最好的办法是将side_bar_html的代码放入您的onreadystatechange函数中，以便它在设置之前不会被使用。

Answer 2

将以下代码添加到onreadystatechange函数的末尾（在if语句中，检查值为4）。例如：

request.onreadystatechange = function() { 

if (request.readyState == 4) { 

    var xmlDoc = GXml.parse(request.responseText); 
      var points = xmlDoc.documentElement.getElementsByTagName("point"); 

      var polygonsToShow = []; 
      for (var i = 0; i < points.length; i++) {              
        var lat = parseFloat(points[i].getAttribute("lat")); 
        var lng = parseFloat(points[i].getAttribute("lng")); 
        var pid = points[i].getAttribute("id"); 
        for(var j = 0; j < polygons.length; j++) { 
          if(polygons[j].vt_bid == pid) { 
            polygonsToShow.push(j); 
          } 
        } 
        var point = new GLatLng(lat,lng);      
        var pname = points[i].getAttribute("name"); 
        var curMarker = createSearchMarker(point, pid, pname,getLetter(i));        
        map.addOverlay(curMarker); 
      } 
      //olays.buildings.checked = false; : Figure out some way to uncheck the buildings overlay checkbox? 
      for(var k = 0; k < polygons.length; k++) { 
        polygons[k].hide(); 
      } 

      for(var l = 0; l < polygonsToShow.length; l++){ 
        polygons[polygonsToShow[l]].show(); 
      } 

      searchResults = new HtmlControl('<div style="background-color:white; border:solid 1px grey; padding:2ex; overflow:auto; width:125px; margin:1px; font-size:14px;"><img align="right" style="cursor: pointer;" src="http://www.thebort.com/maps/images/close.gif" onclick="closeSearch()"><strong>Search</strong><br/>' + side_bar_html + '</div>', {selectable:true}); 
      map.addControl(searchResults, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 70))); 
}