Javascript click事件中变量的处理

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

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 
}

---

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

run\u canvas方法可能异步执行其动画代码，但是在它之后的语句将

animating

属性设置为false，在动画启动时立即执行。当

run\u canvas

方法完成其动画时，您需要将该属性设置为false，或者在完成时触发事件并在事件处理程序中设置该属性。

您如何知道它是非阻塞的？@Juhana-从给出的详细信息来看似乎不是？也许我应该调整一下我的答案。你是否建议在run_canvas（）的末尾添加animating=false；没错。或者让函数在完成时触发一个事件，并在事件处理程序中设置属性。是的，感谢这一点：）函数完成后，我必须在函数内部设置animating=false。您可以发布动画代码吗？在我的动画代码中，我没有更改变量animating，这是一个长代码：）实现k-means集群。