2012-02-23 115 views
0

我一直在使用谷歌地圖顯示喬治亞州的所有縣,並允許用戶點擊它們並收集有關所選縣的人口普查數據的過去一週頁面。各縣在GPolygons的數組,我已經實現了互動式地圖與此(須藤代碼):Chrome從JavaScript崩潰?

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分鐘才能完全恢復。它影響我的整個計算機,而不僅僅是鉻。我將頁面上的所有javscript註釋掉,並將其逐段重新引入,問題區域是for循環,用於在多邊形疊加層上創建偵聽器。爲了驗證它是循環本身而不是代碼中的問題,我模擬了循環條件,並且網頁仍然以鉻形式崩潰。即使使用如此簡單的循環:

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

頁面仍然崩潰。我不知道爲什麼它不能處理這些代碼。任何人有任何關於如何解決這個問題的建議..?該頁面可以在Firefox和IE9中正常打開。

--update--

爲了更形象地描述碰撞:Chrome瀏覽器開始加載頁面。雖然頁面仍然完全空白,但事情開始變慢,整個機器變得越來越沒有響應,直到我只能移動鼠標,鼠標移動或點擊沒有任何事情發生。計算機保持靜止狀態約10分鐘,載入「Aw,snap!」錯誤頁面,並在崩潰後的另外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 
     } 
    } 
} 

<%=輸出>是從VB代碼寫入到多邊形[]數組多邊形的整體轉換,和它們出現在地圖上的罰款。

如果我註釋掉腳本的PROBLEM CODE段,頁面加載正常,但沒有所需的功能。如果我包含細分受衆羣,那麼該頁面會崩潰。但是,如果我省略了PROBLEM CODE段,並在此函數中包含一個不同的ANYWHERE循環,則頁面將崩潰。即使是一個for循環如

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

會使頁面崩潰。我一直堅持這個問題好幾天了,這讓我瘋狂。任何人有任何想法,可能是什麼問題..?

另外,如果我用chrome進入控制檯並鍵入一個採樣循環,它會正常執行。即,如果I型

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

點擊時,根據需要在地圖上每個覆蓋火正確生成監聽器。同樣,在函數中包含這樣的內容會使頁面崩潰,但在控制檯中它可以正常工作。

+0

當您在空白頁面上將該簡單循環複製/粘貼到您的控制檯時,它會崩潰嗎? ...如果不是,你的問題在別處。 – jondavidjohn 2012-02-23 21:54:37

+0

定義「崩潰」。描述一個確切的行爲。 – 2012-02-23 22:59:48

+0

如果通過「崩潰」,你的意思是「我得到了一個'噢,管理單元'。頁面「,然後請訪問'chrome:// crashes'並提交錯誤/崩潰報告。如果您能重現問題,我們很樂意看到代碼。 – 2012-02-24 08:57:58

回答

1

不使用int來聲明計數器... javascript是動態類型的。

使用var

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

+1奇怪的是,它會崩潰他的瀏覽器......我只是拋出一個意外的標識符錯誤。我很擔心,但嘗試它:)。 – 2012-02-23 21:38:59

+0

我的錯誤,我寫錯了問題。我確實使用var來聲明我。它仍然與「哦,啪!」一起崩潰錯誤頁面。 – 2012-02-23 21:42:47

1

你能後發生了什麼叫循環,以及採取一些heap snapshots? 直接在循環之前獲取一個,並且如果可能的話,在循環運行之前進行一些操作,直到它崩潰。

循環本身是無害的,但調用它的代碼可能會導致無限的範圍問題?

0

好的。我嘗試了很多東西,終於找到了一些有用的東西,但沒有任何意義。請評論,如果你明白這一點。

我定義了一個名爲addListeners()的單獨函數,它將問題區域中的EXACT代碼作爲主體,省略了setupmap()函數中的問題代碼,從問題代碼的同一行調用addListeners()函數已從中刪除,並將變量polyfip []全局化。所以,代碼沒有改變,除了問題代碼在它自己的塊內。

任何人都知道爲什麼這可以解決問題?打我的地獄..

0

什麼是你的polys.length?如果它很大/很大,那麼您的JavaScript V8 VM堆就已經用完了(採用堆快照確實是一個很好的建議。)在這種情況下,您將看到「Aw,snap!」錯誤。您在答案中描述的「解決方案」暫時減少了代碼的內存佔用量。

+0

polys.length的值爲159.即使在setupmap()函數中插入空循環也會導致錯誤。 5次迭代的空循環不可能導致內存耗盡。你是這麼認爲的..? – 2012-02-25 06:00:54

+0

好吧,內存問題對我來說似乎不太可能,但堆分析仍然是有用的,至少對程序行爲有一定的瞭解。在循環之前拍攝一張快照,循環運行時另一張(根據@ user1090190的建議)。然後您可以比較它們(內置函數)以瞭解它們之間的內存分配。 – 2012-02-25 07:42:52