Dealing with variables in click event

Question

I've created a canvas dynamically using the following function:

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 
}

Now whenever I click on the canvas the animation starts no matter what. What I mean is that the global variable animating doesn't get it's value changed. Hence my question: What am I doing wrong, how should I deal with this kind of situation?

Answer 1

The run_canvas method presumably executes its animation code asynchronously, but the statement after it which sets the animating property to false is executed immediately upon the animation starting. You need to set the property to false in your run_canvas method when it completes its animation, or trigger an event on completion and set the property in the event handler.