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

Question

我使用以下函数动态创建了一个画布：

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 
}

现在，每当我单击画布时，无论如何都会开始动画。我的意思是全局变量动画不会改变它的值。因此我的问题是：我做错了什么，我应该如何处理这种情况。

Answer 1

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