javascript - Chrome 因 JavaScript 崩溃？

Question

过去一周我一直在开发一个页面，该页面使用谷歌地图显示佐治亚州的所有县，并允许用户单击它们并收集有关所选县的人口普查数据。这些县位于 GPolygon 数组中，我已经用此实现了交互式 map (sudo 代码):

instantiate map;
fill polys[] array from vb code-behind;
for ( var i=0; i<polys.length; i++ ) {
    GEvent.addListener(polys[i], "click", function() {
        highlight polygon and select item in listbox;
        or
        un-highlight polygon and deselect item in listbox;
    }
}

当我在页面上工作时(在 chrome 中测试整个时间)，这非常有效，并且当我几乎完成了它的工作以及前几天它与它交互的页面时，它开始崩溃 90% 的时间我打开它。这些崩溃非常严重，以至于我的计算机需要近 15 分钟才能完全恢复。它影响我的整个计算机，而不仅仅是 Chrome。我注释掉了页面上的所有 javscript 并逐段重新引入它，问题区域是在多边形覆盖层上创建监听器的 for 循环。为了验证这是循环本身的问题而不是其中的代码的问题，我模拟了循环条件，并且网页在 Chrome 中仍然崩溃。即使使用像这样简单的循环:

var count=0;
for ( var i=0; i<5; i++)
    count=1;
alert(count);

页面仍然崩溃。我不知道为什么它不能处理这段代码。任何人对如何解决这个问题有任何建议..？该页面在 Firefox 和 IE9 中可以正常打开。

--更新--

更形象地描述崩溃:chrome 开始加载页面。当页面仍然完全空白时，速度开始变慢，我的整个机器变得越来越无响应，直到我只能移动鼠标，鼠标悬停或单击时没有任何反应。计算机保持静止状态大约 10 分钟，加载“噢，啪!”错误页面，并且在崩溃后的 5 分钟内仍然缓慢且无响应。这是导致错误的整个函数。

            var polys = [];
            var labelsAr = [];
            var poly; 
            var point; var point2;
            var marker;
            var label;
            var map;
            if (document.getElementById("map") != undefined) {
                // init map
                map = new GMap2(document.getElementById("map")); }

            var pnames;
            pnames = "<%=pnames%>";
            var labels = pnames.split(",");


 function setupmap(){
     if (GBrowserIsCompatible()) {
         if (document.getElementById("map") != undefined) {


       polyfip = [];
       <%=polyfipSt%>

       // add map controls and set loc
       // the map = new GMap2 statement is not within a code block
       map.addControl(new GLargeMapControl());
       map.addControl(new GMapTypeControl());
       map.setCenter(new GLatLng(32.80, - 83.50), 7); 
       var colour = "#ff6666";

       var tooltip = document.createElement("div");
       map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
       tooltip.style.visibility="hidden";

       <%=output%>

       //PROBLEM CODE
               for (var i=0; i<polys.length; i++) {
                    GEvent.addListener(polys[i], "click", function() {
                        var evtObj = window.event ? event : e;
                        for (var i=0; i<polys.length; i++) {
                            if ( this == polys[i] ) {
                                if (evtObj.ctrlKey) {
                                    map.closeInfoWindow();
                                    clickCounty(labels[i]); //a function elsewhere defined with simple if-else checks to highlight the county
                                }
                                else {
                                    if ( document.forms["pageform"].MainContent_CountySelection.options[i].selected==true && countiesSelected==1 ) {
                                        clickCounty(labels[i]);
                                        map.closeInfoWindow();
                                        }
                                    else {
                                        var overlaylatlng = this.getVertex(0);
                                        for (var j = 0; j < document.forms["pageform"].MainContent_CountySelection.length; j++) {
                                            document.forms["pageform"].MainContent_CountySelection.options[j].selected=false;
                                            var tempPoly = polys[j];
                                       tempPoly.color = "EFEDB0";
                                            map.addOverlay(tempPoly);
                                            }
                                        countiesSelected = 0;
                                    //an infowindow with some js function links
                                    var infoWindow = map.openInfoWindowHtml(overlaylatlng,"<form id='f" + i + "' name='f" + i + "'  method='post' action='countystats.aspx'><input type='hidden' name='countyName' id='countyName' value='" + labels[i] + "' /></form> County:  "+labels[i]+" <br /><br /><a href='javascript:submitForm(\"f" + i + "\")'>Core Data</a><br /><form id='fs" + i + "' name='fs" + i + "'  method='post' action='countystats2.aspx'><input type='hidden' name='countyName' id='countyName' value='" + labels[i] + "' /></form><a href='javascript:submitForm(\"fs" + i + "\")'>Single Tract Statistics</a> <form id='fsc" + i + "' name='fsc" + i + "'  method='post' action='getACScounty.aspx'><input type='hidden' name='countyName' id='countyName' value='" + labels[i] + "' /></form><a href='javascript:submitForm(\"fsc" + i + "\")'>ACS All Tracts in County Statistics</a> <br /><a href=getsp1.aspx?countylist='" + polyfip[i] + "'>Census2010 County</a> <form id='fscsp" + i + "' name='fscsp" + i + "'  method='post' action='getACScountysp.aspx'><input type='hidden' name='countyName' id='countyName' value='" + polyfip[i] + "' /></form><a href='javascript:submitForm(\"fscsp" + i + "\")'>Census2010 Sub-County</a>");
                                        clickCounty(labels[i]);
                                    }
                                }
                                break;
                            }
                        }
                    });
                }
          //END PROBLEM CODE
        }
    } 
}

<%=output> 是从 vb 代码写入到 polys[] 数组中的一整套多边形，它们很好地显示在 map 上。

如果我注释掉脚本的问题代码段，则页面可以正常加载，而无需所需的功能。如果我包含该段，页面就会崩溃。但是，如果我省略 PROBLEM CODE 段，并在此函数中的任何位置包含不同的 for 循环，则页面会崩溃。甚至是 for 循环，例如

for (var i=0; i<5; i++) { }

会使页面崩溃。我已经被这个问题困扰好几天了，它快把我逼疯了。任何人都知道问题可能是什么......？

此外，如果我进入 chrome 控制台并输入示例循环，它会正常执行。即如果我输入

for (var i=0; i<polys.length; i++) {
    GEvent.addListener(polys[i], "click", function() {
         alert("Listening!");
    });
}

map 会在每个覆盖层上生成监听器，这些监听器会根据需要在单击时正确触发。同样，在函数中包含类似的内容会导致页面崩溃，但在控制台中它工作正常。

Answer 1

不要使用int来声明计数器...javascript是动态类型的。

使用var

var count=0;
for ( var i=0; i<5; i++)
    count=1;
alert(count);