Javascript 需要设置间隔来停止自己

我想做一个非常简单的动画，画一个圆的中心点，然后慢慢画一条以渐进圆结尾的线（半径）。现在，圆的部分工作得很好，这是代码的行，只是没有工作，因为我打算。它就是不停。当用户单击画布的特定区域时，一切都会触发

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.
        }
    }

var lineX=390；
canvas.addEventListener（'click'，ProcessClick，false）；
函数进程单击（toi）{
var posx=toi.layerX；
var posy=toi.layerY；
if（toi.layerX==未定义| | toi.layerY==未定义）{
posx=toi.offsetX；
posy=toi.offsetY；
}
如果（posx>=315&&posx=250&&posy您需要在
ProcessClick
函数外部获得
var interval
声明。这样，它就被声明为局部变量，并且在
aniRadio
中是
未定义的

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

您需要在
ProcessClick
函数之外获取
var interval
声明。这样，它被声明为局部变量，并且在
aniRadio
中是
未定义的

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

应该使用自调用函数在主代码和回调函数之间共享变量

每个函数在被调用时都会创建一个新的作用域（所有局部变量都在这个作用域中）。
函数可以访问其作用域和父作用域（调用它的函数）中的所有变量

因此，如果您想在两个函数之间共享一个变量，可以使用包含共享变量的自调用函数包装这两个函数

(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.
            }
        }
})();

（函数（）{
var区间；
var lineX=390；
canvas.addEventListener（'click'，ProcessClick，false）；
函数进程单击（toi）{
var posx=toi.layerX；
var posy=toi.layerY；
if（toi.layerX==未定义| | toi.layerY==未定义）{
posx=toi.offsetX；
posy=toi.offsetY；
}
如果（posx>=315&&posx=250&&posy您应该使用一个自调用函数在主代码和回调函数之间共享变量

每个函数在被调用时都会创建一个新的作用域（所有局部变量都在这个作用域中）。
函数可以访问其作用域和父作用域（调用它的函数）中的所有变量

因此，如果您想在两个函数之间共享一个变量，可以使用包含共享变量的自调用函数包装这两个函数

(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.
            }
        }
})();

（函数（）{
var区间；
var lineX=390；
canvas.addEventListener（'click'，ProcessClick，false）；
函数进程单击（toi）{
var posx=toi.layerX；
var posy=toi.layerY；
if（toi.layerX==未定义| | toi.layerY==未定义）{
posx=toi.offsetX；
posy=toi.offsetY；
}
如果（posx>=315&&posx=250&&posyd您是否检查了
interval
的可达性，因为
clearInterval
也适用于
undefined
您是否检查了
interval
的可达性，因为
clearInterval
也适用于
undefined
天哪，这是一个新手犯的错误。谢谢您的回答，它可以作为inte我现在明白了。天哪，这是一个新手的错误。谢谢你的回答，它现在按预期工作。这也可以工作。我现在明白了我的错误，谢谢你的时间。这也可以工作。我现在明白了我的错误，谢谢你的时间。