Javascript 递归函数执行整个；堆栈"；当条件满足时

该程序是一条动画线条，在屏幕上随机移动。我重构了要在对象中使用的代码，但仍然遇到问题。我想让线“反弹”离开屏幕的一侧，但不幸的是，当它这样做时，它会创建一个更大的线，而不是动画，并开始增长失控

function animatedLine(startx, starty, colorStr){
    // these should be passed into the object.
    this.curpointX = startx,
    this.curpointY = starty,
    this.NORTH = 1,
    this.NORTHEAST = 2;
    this.EAST = 3;
    this.SOUTHEAST = 4;
    this.SOUTH = 5;
    this.SOUTHWEST = 6; 
    this.WEST = 7;
    this.NORTHWEST = 8;
    this.colorHex = colorStr;

    var self = this;
    // Lets get rid of one of these position variables.
    this.startpointx = this.curpointX;
    this.startpointy = this.curpointY;
    this.curposx = this.curpointX;
    this.curposy = this.curpointY;
    this.endpointx = this.curpointX;
    this.endpointy = this.curpointY;
    this.myinterval = {};

    this.init = function() {
        this.myinterval = setInterval( function() { self.animate(self.endpointx,self.endpointy);}, 10);
    }

    this.animate = function(endpointx, endpointy) {
        this.startpointy = this.curposy;
        this.startpointx = this.curposx;
        if (this.curposx == endpointx && this.curposy == endpointy){
            this.drawLine();
            return false;
        }
        else if(endpointx != this.curposx && endpointy != this.curposy){
            // this will screw up if we have half pixel somewhere. ( will always be diagnol)
            this.curposy += (endpointy > this.curposy ? 1 : -1);            
            this.curposx += (endpointx > this.curposx ? 1 : -1);
        }
        else if(endpointx != this.curposx){
            this.curposx += (endpointx > this.curposx ? 1 : -1);
        }
        else if(endpointy != this.curposy){
            this.curposy += (endpointy > this.curposy ? 1 : -1);
        }
        else{
            console.log("We have a problem");
        }
        this.drawShape(this.curposx, this.curposy, this.colorHex);
    }

    this.drawShape = function(tendpointx, tendpointy, clor){
        var canvas = document.getElementById('bg');
        var ctx = canvas.getContext('2d');

        ctx.strokeStyle = clor;
        ctx.globalAlpha = 0.2;
        ctx.beginPath();
        ctx.moveTo(this.startpointx ,this.startpointy );
        ctx.lineTo(tendpointx,tendpointy);
        ctx.stroke();
    } 

    this.drawLine = function(flagDirection){

        clearInterval(this.myinterval);

        // calculate the next point with direction and distance.
        var direction = Math.floor(Math.random() * 8) + 1;
        var distance = Math.floor(Math.random() * 10) + 1;

        var newPointY, newPointX;

        switch(direction){
            case this.NORTH:
                newPointX = this.endpointx;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break; 
            case this.NORTHEAST:
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.EAST:
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy;
                this.setAnimationVariables(newPointX, newPointY);
                break; 
            case this.SOUTHEAST: 
                newPointX = this.endpointx + distance;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.SOUTH:
                newPointX = this.endpointx;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.SOUTHWEST:
                newPointX =  this.endpointx - distance;
                newPointY = this.endpointy + distance;
                this.setAnimationVariables(newPointX, newPointY);               
                break;
            case this.WEST:
                newPointX = this.endpointx - distance;
                newPointY = this.endpointy;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            case this.NORTHWEST:
                newPointX = this.endpointx - distance;
                newPointY = this.endpointy - distance;
                this.setAnimationVariables(newPointX, newPointY);
                break;
            default:
                console.log("We have a problem");
        }
        this.init();
    }

    // Helper function to set variables for animation. 
    // TODO refactor to get rid of some of these variables.
    this.setAnimationVariables = function(newPointX, newPointY){

        // we can check this inside of here. 
        // check the newpoints. Verify its inside the canvas.
        if(newPointY > 0 && newPointX > 0 && newPointY < $(document).height() && newPointX < $(document).width()){
            this.startpointx = this.endpointx;
            this.startpointy = this.endpointy;
            this.curpointX = this.endpointx;
            this.curpointY = this.endpointy;
            this.endpointx = newPointX;
            this.endpointy = newPointY;         
        }
        else {
            // This is bugging out for some reason we are running the full programatic stack.
            this.drawLine();
        }
    }
}

function animatedLine（startx、starty、colorStr）{
//这些应该被传递到对象中。
this.curpointX=startx，
this.curpointY=starty，
这个。北=1，
这1.2=2；
这1.EAST=3；
这1.4=4；
这个南=5；
这个西南=6；
西=7；
这是西北方向=8；
this.colorHex=colorStr；
var self=这个；
//让我们去掉其中一个位置变量。
this.startpointx=this.curpointX；
this.startpointy=this.curpointY；
this.curposx=this.curpointX；
this.curposy=this.curpointY；
this.endpointx=this.curpointX；
this.endpointy=this.curpointY；
this.myinterval={}；
this.init=函数（）{
this.myinterval=setInterval（函数（）{self.animate（self.endpointx，self.endpointy）；}，10）；
}
this.animate=函数（endpointx，endpointy）{
this.startpointy=this.curposy；
this.startpointx=this.curposx；
if（this.curposx==endpointx&&this.curposy==endpointy）{
这是一条绳（）；
返回false；
}
else if（endpointx！=this.curposx&&endpointy！=this.curposy）{
//如果我们在某个地方有半个像素，这将搞砸。（将始终是diagnol）
this.curposy+=（端点>this.curposy？1:-1）；
this.curposx+=（endpointx>this.curposx？1:-1）；
}
else if（endpointx！=this.curposx）{
this.curposx+=（endpointx>this.curposx？1:-1）；
}
else if（endpointy！=this.curposy）{
this.curposy+=（端点>this.curposy？1:-1）；
}
否则{
log（“我们有问题”）；
}
this.drawShape（this.curposx，this.curposy，this.colorHex）；
}
this.drawShape=函数（tendpointx、tendpointy、clor）{
var canvas=document.getElementById（'bg'）；
var ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=clor；
ctx.globalAlpha=0.2；
ctx.beginPath（）；
ctx.moveTo（this.startpointx，this.startpointy）；
ctx.lineTo（tendpointx，tendpointy）；
ctx.stroke（）；
} 
this.drawLine=函数（flagDirection）{
clearInterval（this.myinterval）；
//用方向和距离计算下一个点。
var direction=Math.floor（Math.random（）*8）+1；
var distance=Math.floor（Math.random（）*10）+1；
变量newPointY，newPointX；
开关（方向）{
本案北：
newPointX=this.endpointx；
newPointY=this.endpointy-距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案东北：
newPointX=this.endpointx+距离；
newPointY=this.endpointy-距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案东：
newPointX=this.endpointx+距离；
newPointY=this.endpointy；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案东南：
newPointX=this.endpointx+距离；
newPointY=this.endpointy+距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案南部：
newPointX=this.endpointx；
newPointY=this.endpointy+距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案西南：
newPointX=this.endpointx-距离；
newPointY=this.endpointy+距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
西区的情况：
newPointX=this.endpointx-距离；
newPointY=this.endpointy；
这个.setAnimationVariables（newPointX，newPointY）；
打破
本案西北：
newPointX=this.endpointx-距离；
newPointY=this.endpointy-距离；
这个.setAnimationVariables（newPointX，newPointY）；
打破
违约：
log（“我们有问题”）；
}
this.init（）；
}
//用于设置动画变量的辅助函数。
//TODO重构以消除其中一些变量。
this.setAnimationVariables=函数（newPointX，newPointY）{
//我们可以在这里检查一下。
//检查newpoints。在画布中验证它。
如果（newPointY>0&&newPointX>0&&newPointY<$（文档）.height（）&&newPointX<$（文档）.width（））{
this.startpointx=this.endpointx；
this.startpointy=this.endpointy；
this.curpointX=this.endpointx；
this.curpointY=this.endpointy；
this.endpointx=newPointX；
this.endpointy=newPointY；
}
否则{
//由于某种原因，我们正在运行完整的程序堆栈。
这是一条绳（）；
}
}
}

您可以在这里看到我的JSFIDLE：

正如你所看到的，这条线开始以指数形式绘制自己，因为每次它碰到屏幕边缘时，它都会为每条新线创建一个新的“堆栈”。如何解决此问题？

此。动画（…）

没有为