빠른 두 번 클릭으로 인해 코드가 오류가 발생합니다

Question

플립 애니메이션을 제어하는 ​​데 사용되는 다음 코드가 있습니다. 정상적인 클릭으로 모든 것이 잘 작동합니다.

그러나 빠른이 클릭으로 인해 2 개의 이벤트가이 문제를 방지하는 부울 검사를 통과하게됩니다. console.log에서 나는 첫 번째 프로세스에 대해 'started running'을보고 두 번째 클릭에 대해 'already running'을 볼 것으로 예상합니다. 대신 두 번의 클릭이 모두이를 처리하고 나중의 논리로 혼란을 야기 할 것으로 보입니다.

내가 뭘 잘못하고 어떻게이 문제를 피할 수 있는지 누군가 알려주시겠습니까?

감사합니다, 당신은 해제된다

$('.item').each(function() { 
    var elem = $(this); 
    elem.data('running', false); 

    elem.bind("click",function(event){ 
     event.preventDefault(); 

     if (elem.data('running') == false) { 
      elem.data('running', true); 
      console.log('started running'); 
      //do some stuff 
      elem.data('running', false); 
     } else { 
      console.log('already running'); 
     } 
    }) 
}); 

Answer 1

은 당신이 당신의 애니메이션을 완료하지 후, 애니메이션을 초기화 직후 "실행"을 참조하십시오. 예를 들면 다음과 같이 할 수 있습니다 :

if (!elem.data('running')) { 
    elem.data('running', true); 
    console.log('started running'); 
    elem.fadeOut('fast',function(){ 
     elem.data('running', false); 
    }); 
}