使用Firebug控制台檢查陣列大小

Question

我有以下JS文件，其中包含一個函數，用於繪制我正在使用HTML5 canvas和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”不會對其進行修改。