Javascript 这是一个无限循环，但我一生都不知道为什么

因此，我正在制作一个小的网络应用程序，以更好地使用画布，但我被卡住了。我想要一个旋转的n边多边形（画线已经可以了）。游戏循环通过一个网格数组循环（网格上的每个点都包含一个point（）对象的子类），并对每个点调用tick（）方法。在碰到ShapePoint（）对象（鼠标中键放置在画布上）之前，一切都正常。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();

//################################################################
//这是问题课。
//差不多，当游戏循环调用tick（）函数时
//在任何ShapePoint对象中，所有对象都挂起。比赛还在继续
//循环遍历整个tick（）函数（put console.log（））
//函数，你会明白我的意思）不断地，但是
//它应该显示的效果没有显示。
//
//################################################################
函数形状点（x、y、边）{
//位置变量
this.positionOnCanvas=[x，y]；
//边数
这个。N=边；
//当前步骤
这一步=0；
//用于存储所有角度数据的数组
this.thetas=新数组（this.N）；
//用于存储所有顶点数据的数组
this.vertList=新数组（this.N）；
//函数将所有天使的数量增加到偶数
this.stepPoints=函数{
//四面八方
因为（i=0；i=90&&this.thetas[i]=180&&this.thetas[i]=270&&this.thetas[i]在他/她的上述评论中是正确的：您在
步骤点
和
勾选
中都使用了一个全局
i
变量，因此这些方法相互干扰

有些语言中，方法中使用的变量是隐式局部变量，除非另有声明，但JavaScript不是这些语言中的一种。在JavaScript中，您需要使用
var
关键字声明局部变量，否则它们是隐式全局变量。
不是直接答案，但您可以执行
this.step=this.step%360
将其限制在一定范围内。这只是猜测，但两个循环中的
i
的声明是同一个变量吗？@user2310289否，不同的方法，因此它们不是interfere@Lampitosgames但是您未能将
i
声明为局部变量。在没有显式
var
声明的情况下，它是全局变量。@Lampitosgames-wh他当时说的是…只是把
var i=0
改为
i=0
谢谢，直到现在才意识到这一点！也要归功于用户，对不起，伙计XD