javascript - 处理点击事件中的变量

Question

我使用以下函数动态创建了一个 Canvas :

var animating=false;
function create_canvas(Container,Id,Width,Height)
{
 ...//set width,height
 //added a click event listener
 document.getElementById(Id).addEventListener("click", function () 
        {
            if(animating==true)
            {
                alert("Running the animation"); //can't reach this part 
                return;
            }
            else
            {
                animating=true;
                run_canvas();
                animating=false;
            }
        });
 ...//append to Container
}
function run_canvas()
{
 ...//some code here 
}

现在，无论何时我点击 Canvas ，动画都会启动。我的意思是全局变量 animating 没有改变它的值。因此我的问题是:我做错了什么，我应该如何处理这种情况？

Answer 1

run_canvas 方法可能会异步执行其动画代码，但它后面将 animating 属性设置为 false 的语句会在动画开始时立即执行。您需要在动画完成时在 run_canvas 方法中将该属性设置为 false，或者在完成时触发一个事件并在事件处理程序中设置该属性。