javascript - 这是一个无限循环，但我终究无法弄清楚为什么

Question

几乎我正在制作一个小网络应用程序以更好地使用 Canvas ，但我被卡住了。我想要一个旋转的 n 边多边形(画线已经可以了)。游戏循环遍历一个网格数组(网格上的每个点都包含一个 Point() 对象的子类)，并对每个点调用 tick() 方法。一切正常，直到它碰到一个 ShapePoint() 对象(鼠标中键放置在 Canvas 上)。 ShapePoint 的 tick() 方法在某种程度上是一个无限循环。如果你在里面放一个 console.log("hi")，它会给你大约 2000 条“hi”消息，所以它可以工作(理论上)。有趣的是，即使它在 stoke() 中循环，也没有任何反应!

//################################################################
//                 THIS IS THE PROBLEM CLASS.
//  So pretty much, when the game loop calls the tick() funciton
//  of ANY ShapePoint object, everything hangs.  The game is still
//  looping through the ENTIRE tick() function (put console.log()
//  functions in and you'll see what I mean) continually, but the
//  effects it is supposed to display aren't shown.
//
//################################################################
    function ShapePoint(x, y, sides) {
        //position variable
        this.positionOnCanvas = [x, y];
        //number of sides
        this.N = sides;
        //current step
        this.step = 0;
        //the array to store all the angle data
        this.thetas = new Array(this.N);
        //the array to store all the vertex data
        this.vertList = new Array(this.N);
        //function to increase all the angels by an even amount
        this.stepPoints = function(s) {
            //for every side
            for (i=0; i<this.N; i++) {
                //multiply the current 'i' value by ((360/number of sides) + current step).  This serves to create points at even intervals all the way around a circle, and have it increase by s every loop
                this.thetas[i] = i*((360/this.N) + s);
                //get the x value with 40*cos(angle for this point).  Same for y, only with sin.  Round both to 2 decimal places
                this.vertList[i] = [Math.round((40*(Math.cos(this.thetas[i])))*100)/100, Math.round((40*(Math.sin(this.thetas[i])))*100)/100];
                //if the current angle is between 90 and 180...
                if (this.thetas[i]>=90 && this.thetas[i]<=180) {
                    //invert the x value
                    this.vertList[i][0] *= -1;
                //else if the angle is between 180 and 270...
                } else if (this.thetas[i]>=180 && this.thetas[i]<=270) {
                    //invert both the x and the y values
                    this.vertList[i][0] *= -1;
                    this.vertList[i][1] *= -1;
                //else if the angle is between 270 and 360...
                } else if (this.thetas[i]>=270 && this.thetas[i]<=360) {
                    //invert the y value
                    this.vertList[i][1] *= -1;
                }
            //nothing needed for 0-90 because both are positive
            }
        }
        this.tick = function() { //<<<<<<<<THIS IS THE PROBLEM FUNCTION!
            //setup all the points forward
            this.stepPoints(this.step);
            //for every side in this polyogn...
            for (i=0; i<this.N; i++) {
                //shorten the location of the positions
                var posX = this.vertList[i][0] + this.positionOnCanvas[0];
                var posY = this.vertList[i][1] + this.positionOnCanvas[1];
                //begin drawing
                ctx.beginPath();
                //move to the x and y location of the current point
                ctx.moveTo(posX, posY);
                //if point is not the last in the array...
                if (i < this.N-1) {
                    //draw a line to the next point in the array
                    ctx.lineTo(this.vertList[i+1][0] + this.positionOnCanvas[0], this.vertList[i+1][1] + this.positionOnCanvas[1]);
                //else...
                } else {
                    //draw a line to the first point in the array
                    ctx.lineTo(this.vertList[0][0] + this.positionOnCanvas[0], this.vertList[0][1] + this.positionOnCanvas[1]);
                }
                //draw a line
                ctx.strokeStyle = "#000000";
                ctx.lineWidth = 0.5;
                //end
                ctx.stroke();
                //draw the vertex
                ctx.fillStyle = "orange";
                ctx.fillRect(posX-2, posY-2, 4, 4);
            }
            //draw the origin of the polygon
            ctx.fillStyle = "lightPurple";
            ctx.fillRect(this.positionOnCanvas[0]-2, this.positionOnCanvas[1]-2, 4, 4);
            //if the step is greater than 360, set it to 0
            this.step = this.step % 36; //(thanks Neikos!)
        }
    }
    ShapePoint.prototype = new Point();

所以我花了几个小时调整不同的东西，但我终究还是看不出问题出在哪里!如果有人能弄明白，那就太棒了。如果您需要更多有关具体实现方式的上下文，我创建了一个 JSFiddle为你。提前致谢，这个地方总是很有帮助!

编辑::我确实意识到我的代码有点笨拙，但我输入所有内容确实有助于我下次学习

Answer 1

user2310289他/她在上面的评论中是正确的:您在 stepPoints 和 tick 中都使用了一个全局 i 变量，因此这些方法会产生干扰彼此。

在某些语言中，方法中使用的变量是隐式局部变量，除非另有声明，但 JavaScript 不是其中一种语言。在 JavaScript 中，您需要使用 var 关键字来声明局部变量，否则它们是隐式全局变量。