javascript - Dealing with variables in click event -

i've created canvas dynamically using following function :

var animating=false; function create_canvas(container,id,width,height) {  ...//set width,height  //added click event listener  document.getelementbyid(id).addeventlistener("click", function ()          {             if(animating==true)             {                 alert("running animation"); //can't reach part                  return;             }             else             {                 animating=true;                 run_canvas();                 animating=false;             }         });  ...//append container } function run_canvas() {  ...//some code here  } 

now whenever click on canvas animation starts no matter what. mean global variable animating doesn't it's value changed. hence question : doing wrong , how should deal kind of situation .

the run_canvas method presumably executes animation code asynchronously, statement after sets animating property false executed upon animation starting. need set property false in run_canvas method when completes animation, or trigger event on completion , set property in event handler.