내가 동적으로 다음과 같은 기능을 사용하여 캔버스를 만든 클릭 이벤트

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로 설정하거나 완료시 이벤트를 트리거하고 이벤트 처리기에서 속성을 설정해야합니다.