JavaScript 입문 : 가위바위보 게임 - setInterval함수와 setTimeout함수

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

 

지난시간 setInterval함수를 통하여 가위바위보 그림을 0.05초마다 바꾸도록 설정 하였고 중복되는 부분을 제거하여 간단하게 코딩을 해 보았습니다. 

 

이제는 setInterval 함수내 사용되었던 코드를 별도의 함수로 외부에 선언하고 setInterval 함수자체의 모양을 setInterval(별도 함수이름, 50)의 모양으로 다듬어 보고자 하며 setTimeout함수로 대체해 보는 연습을 해 보도록 하겠습니다. 

 

1. 외부함수 선언

 

setInterval 내에 사용되었던 if문을 외부로 선언하고 setInterval 자체는 간단하게 하고자 하면 다음과 같이 할 수 있습니다. 

 

 

역시 브라우저 또한 잘 반영이 되어 돌아갑니다. 

 

2. setTimeout으로 변경 

 

setInterval 대산 setTimeout으로 변경하여 사용할 수 있습니다. 그러기 위해서는 외부 선언함수내에도 같이 반영해 줘야 합니다. 

 

 

 

※ 변수이름 변경

 

아직 초보인 관계로 변수 이름에 대한 생각이 짧았던것 같습니다. 

상기 setInterval 코드에서 손이 0.05초마다 바뀌는 경우를 comHandChange로, 컴퓨터의 가위바위보를 comGame으로 내가 직접 고른 가위바위보를 myGame으로 변수 이름을 통일하도록 하겠습니다. 

 

일단 상기 내용만 변수를 바꾸면 다음과 같이 사용할 수 있습니다. 

 

 

다시한번 코드가 길어지면서 변수 이름의 중요성을 알게 되었습니다.