使用Firebug控制檯檢查數組大小

Question

我有以下JS文件，其中包含一個函數，我正在使用該函數繪製基於瀏覽器的遊戲的第一級所需的元素，我正在使用HTML5畫布和JavaScript編寫代碼：

* This function draws the elements for level 1. */ 
     function drawLevelOneElements(){ 
      /*First, clear the canvas */ 
      context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height); 
      /*This line clears all of the elements that were previously drawn on the canvas. */ 
      /*Then redraw the game elements */ 
      drawGameElements(); 

      /*Create the four description areas, and place them near the bottom of the canvas */ 
      /*Create boxes with rounded corners for the description areas */ 
      CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){ 
       if(typeof stroke == "undefined"){ 
        stroke = true; 
       } 
       if(typeof radius === "undefined"){ 
        radius = 5; 
       } 
       this.beginPath(); 
       this.moveTo(x + radius, y); 
       this.lineTo(x + width - radius, y); 
       this.quadraticCurveTo(x + width, y, x + width, y + radius); 
       this.lineTo(x + width, y + height - radius); 
       this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); 
       this.lineTo(x + radius, y + height); 
       this.quadraticCurveTo(x, y + height, x, y + height - radius); 
       this.lineTo(x, y + radius); 
       this.quadraticCurveTo(x, y, x + radius, y); 
       this.closePath(); 
       if(stroke){ 
        context.stroke(); 
       } 
      } 

      context.drawDescriptionArea(70, 400, 120, 70); 
      context.font = '25pt Calibri'; 
      context.strokeText('Asset', 90, 440); 

      context.drawDescriptionArea(300, 400, 120, 70); 
      context.strokeText('Liability', 310, 440); 

      context.drawDescriptionArea(540, 400, 120, 70); 
      context.strokeText('Income', 550, 440); 

      context.drawDescriptionArea(750, 400, 180, 70); 
      context.strokeText('Expenditure', 760, 440); 

      /*Now draw the images to the canvas */ 
      /*First, create variables for the x & y coordinates of the image that will be drawn. 
       the x & y coordinates should hold random numbers, so that the images will be 
       drawn in random locations on the canvas.*/ 
       var imageX = Math.floor(Math.random()*100); 
       var imageY = Math.floor(Math.random()*100); 

      /*Draw all images from assetsImageArray */ 
      /*Use a while loop to loop through the array, get each item and draw it. */ 
      var arrayIteration = 0; 
      while(arrayIteration < assetsImageArray.length){ 
       context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50); 
       arrayIteration+1; 
      } 

     } 

當前，當我在瀏覽器中加載我的網頁時，將顯示畫布以及畫布上的開始按鈕。當點擊開始按鈕時，上述功能被調用。

但是，由於某種原因，這個功能需要很長時間才能執行：當我點擊按鈕時，瀏覽器幾秒鐘內什麼也不做，然後它就會淡出，就好像它不是響應，然後該任務實際上被執行，並且該函數中的元素被繪製到畫布上。

我還收到有關無響應腳本的警告消息，給我選擇繼續，調試腳本或停止腳本。當我選擇停止腳本時，將執行被調用的函數，並且所有元素都被繪製到畫布上。

我想知道如何停止顯示此警告消息，並獲得功能更快地繪製元素畫布。

我的第一個想法是，它可能與這個函數結束時的while循環有關，或者可能是我用來保存將要繪製的圖像的數組。

目前，該陣列只保存一個圖像 - 最終我想擁有三個或四個單獨的數組，它們之間將總共保存大約40個圖像，所有這些圖像都將使用此函數繪製到畫布上，但我不認爲我可以開始在這個陣列中添加更多的圖像，直到我設法減少了大量的加載速度。

有沒有人知道我在做什麼是正確的？或者，如果不是，我該怎麼去做呢？

我不確定的一件事是JavaScript如何確定它的數組大小 - 它們是固定的還是動態的？ 我將如何在控制檯中打印出該數組的大小來檢查？

我還沒有指定數組大小，因爲我需要它是動態的，因爲需要加載到畫布上的圖像數量必須可以更改。誰能幫忙？

Answer 1

你的問題是你永遠不會增加arrayIteration。 「arrayIteration + 1」不會修改它。