与变量处理中单击事件

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，或者在完成时触发事件并在事件处理程序中设置属性。