JavaScript 입문 : 가위바위보 게임 - clearInterval(), clearTimeout()

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

 

지난 시간 다음 그림과 같이 브라우저에서 setInterval 함수를 이용하여 가위바위보 그림이 무한루프로 변하게 설정을 해 보았습니다. setInterval은 또 setTimeout 함수로 바꾸어 할 수도 있었구요.

 

 

그림을 보면 가위바위보가 무한정 0.05초 간격으로 변하고 있고 밑에 가위 바위 보의 각 버튼을 만들어 놓았습니다. 즉, 버튼을 누르면 그림이 멈추면서 승패에 대한 점수를 계산하는 방식으로 되어 있습니다. 

 

우선 무한정 돌고있는 그림을 멈추는 함수 명령어가 필요합니다. setInterval() 함수를 멈추게 하는 함수는 clearInterval() 함수입니다. 참고로 setTimeout() 함수를 취소하는 함수는 clearTimeout() 함수입니다. 

 

버튼을 누른다는 것은 예전에 clickButton 이라는 함수를 만들어서 사용한 적이 있는데 복습하자면 다음과 같이 기억해야 합니다. 예를 들어 가위 버튼의 id를 "scissors"로 만들어 놓았기 때문에 clickButton 함수는 다음과 같이 기본형을 가질 수 있습니다. 

 

1. clearInterval(  ) 함수 

 

서두에서 말한것 처럼 clearInterval() 함수는 setInterval()을 멈추게 하는 명령입니다. 사용방법은 다음과 같습니다. 

 

let 아이디 = setInterval(함수, 시간)

clearInterval(아이디)

 

입니다. 직접 지난시간에 이어 setInterval( 함수, 시간)에 let 아이디를 만들고 코딩을 진행하도록 하겠습니다. 

이렇게 만들어 놓으면 그림에서 버튼(가위 or 바위 or 보)을 누르면 다음 그림과 같이 멈춥니다. 

 

 

2. 그림을 멈춘 후 setTimeout함수를 이용 다시 무한변환

 

컴퓨터와의 가위바위보 게임은 유저가 버튼을 누르고 그림이 멈춘 상황에서 승패를 따져야 합니다. 본 게임이 지속적으로 이루질려면 그림이 멈춘 후 일정 시간 (예를 들어 1초)이 지잔 후 다시 게임이 진행되어야 합니다. 이를 위해서 clickButton 함수내 setTimeout을 이용하여 다시 움직이도록 설정할 수 있습니다. 

 

이럴경우 setTimeout()과 setInterval()이 나타내는 아이디는 같아야 합니다. 

 

화면이 멈추었다가 1초후에 화면이 다시 시작되기 위해서는 setInterval( )함수를 다시 사용하고 1초라는 개념을 적어줍니다. 

이는 원래 가위바위보 게임의 if문을 setTimeout( ) 함수내에 다시 반영하는 개념입니다. 

 

우선 setInterval() 함수와 setTimeout() 함수의 개념을 이해하는데 시간이 좀 걸리네요. 직접 타이핑해보고 써보고 해서 머리속으로 이해가 될 때가지 쳐다보아야 합니더. 

 

3. 버그 수정 

 

저같은 초보자는 여기까지 따라온 것도 대단한 발전이라고 생각하고 싶습니다. 그런데 실수로 하나의 버튼을 두번 이상 누르니 멈추지 않고 엄청 빨리 돌아가는 버그가 발생이 되었습니다. 

 

더 실감나기 위해 setTimeout( ) 함수의 시간을 1초가 아닌 2초 기준으로 해 보있더니 버그가 실감이 납니다. 

 

이러한 에러의 원인을 확인해 보면 setTimeout( )함수의 간격은 2초입니다. 2초안에 다시 setInerval( ) 함수를 통하여 가위바위보 그림을 돌리는데 intervalId에 저장되는 변수가 계속적으로 setInterval( )함수에 중복 저장이 되서 엄청 빨리 그림이 움직이고 버튼을 눌렀을때도 멈추지 않게 되는 현상입니다. 

 

이럴경우 setTimeout( )내 setInterval( )이 겹쳐서 작동되지 않도록 clearInterval(아이디)를 추가해 주는 방식이 있을 것입니다.