JavaScript 입문 : 가위바위보 게임 - addEventListener와 removeEventListener / if문으로 버그 해결

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

▒ addEventListener() 함수의 비활성화 함수 removeEventListener()

 

지난시간 같은 아이디를 사용하고 setTimeout( )내 clearInterval( ) 함수를 한번 더 사용함으로써 버튼을 더블클릭이상으로 하였을 경우 나타나는 버그를 간단히 수정해 보았습니다. 

 

또 한가지 방법은 버튼을 활성화 시키는 addEventListener( )함수를 비활성화 시키는 방법입니다. 즉, setTimeout( ) 함수내 removeEventListener( ) 함수를 사용함으로써 버튼을 누르지 못하게 강제할 수 있습니다. 

 

순서는 setTimeout() 함수로 진입하기 전 setInterval( ) 함수 전체가 addEventListner( ) 함수의 영향을 받기때문에 removeEventListener(  ) 함수를 사용하고 다시 setTimeout( ) 함수내 addEventListener( )함수를 사용하여 활성화 시키면 되지 않을까 합니다. 

 

코드는 다음과 같이 작성합니다. 

 

 

조금 눈에 거슬리게 복잡하게 되었네요. 

 

지난 시간 clearInterval(intervalId)를 사용하는 편이 나을 듯 합니다. 어찌 되었던 removeEventListener( ) 함수는 addEventListener( ) 함수를 바활성화 시키는 개념이라고 이해하면 될 듯 합니다. 

 

▒ if문으로 버그 해결

 

강좌에서 보니 역시 간편하게 버그를 해결하는 법을 알려줍니다. if문을 이용하는 방식인데 역시 초보자인 저에게는 어렵습니다만 계속적으로 응용하고 사용하고 타이핑하다 보면 언젠가는 적응이 될 수 있는 날이 오기를 바랍니다.  

 

간단하게 

 

참인 변수를 만들고 참인 경우 clearInterval(아이디)로 setInterval( )의 동작을 멈추고 변수가 거짓으로 적용하여 작동을 하지 않게 하다가 2초내에 변하는 setTimeout( ) 함수에는 다시 참을 만들어 준다고 합니다. 

 

보면 이해하는데 직접 머리속에는 잡히지 않는군요. 계속적으로 이해할려고 노력해봐야 겠습니다.