Need setInterval to stop itself

Question

I want to do a very simple animation, draw the center point for a circle, followed by slowly drawing a line (the radius) ending with a progressive circle. Now, the circle part works fine, it's the code for the line that's just not working as I intend. It just doesn't stop. Everything triggers when the user clicks a specific area of the canvas.

var lineX = 390;    
canvas.addEventListener('click',ProcessClick,false);
    function ProcessClick(toi){
        var posx = toi.layerX;
        var posy = toi.layerY;
        if(toi.layerX == undefined || toi.layerY == undefined){
            posx = toi.offsetX;
            posy = toi.offsetY;
        }
        if(posx>=315 && posx<=465 && posy>=250 && posy<=300){
            ctx.clearRect(300, 60, 180, 180);
            lineX = 390;
            var interval = setInterval(aniRadio, 50);
        }
    }//ProcessClick

    aniRadio = function(){
        if(lineX == 390){
            ctx.beginPath();
            ctx.arc(390, 150, 4, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.fillStyle = "black";
            ctx.fill();
        }
        ctx.beginPath();
        ctx.moveTo(lineX, 150);
        lineX += 5;
        ctx.lineTo(lineX, 150);
        ctx.closePath();
        ctx.stroke();
        if(lineX == 465){
            clearInterval(interval);//tried calling another function that just contains this line. No luck either.
        }
    }

I basically want the interval to stop itself once the line reaches a point, so then I can call the function that draws the circle.

Answer 1

You need to get var interval declaration outside the ProcessClick function. This way, it is declared as a local variable, and it is undefined in aniRadio.

var interval;
function ProcessClick() {
  // ...
  interval = setInterval(aniRadio, 50);
}
aniRadio = ...

Answer 2

You should use a self invoking function for share variables between your main code and your callback.

Each function create a new scope when it's called (it's where all local variables are). A function has access to all variables in its scope and parent's scopes (the function that called it).

SO, if you want to share a variable between to two functions, you can wrap both with a self invoking function containing shared variables.

(function() {
    var interval;
    var lineX = 390;

    canvas.addEventListener('click',ProcessClick,false);
        function ProcessClick(toi){
            var posx = toi.layerX;
            var posy = toi.layerY;
            if(toi.layerX == undefined || toi.layerY == undefined){
                posx = toi.offsetX;
                posy = toi.offsetY;
            }
            if(posx>=315 && posx<=465 && posy>=250 && posy<=300){
                ctx.clearRect(300, 60, 180, 180);
                lineX = 390;
                interval = setInterval(aniRadio, 50);
            }
        }//ProcessClick

        aniRadio = function(){
            if(lineX == 390){
                ctx.beginPath();
                ctx.arc(390, 150, 4, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.fillStyle = "black";
                ctx.fill();
            }
            ctx.beginPath();
            ctx.moveTo(lineX, 150);
            lineX += 5;
            ctx.lineTo(lineX, 150);
            ctx.closePath();
            ctx.stroke();
            if(lineX == 465){
                clearInterval(interval);//tried calling another function that just contains this line. No luck either.
            }
        }
})();