본문 바로가기
JavaScript

타이밍 이벤트 & 단원 총정리

by amoomar 2022. 2. 18.
반응형

 

 

JS에서 애니메이션을 구현할 수 있는 타이밍 이벤트에 대해 학습하였고, JS파트의 총 내용을 활용한 예제 풀이를 통해 단원 복습을 진행하였다.

 

 

1. 타이밍 이벤트

 

1) 타이밍 이벤트란?

 

js에서 애니메이션은 구조가 일반적으로 어렵다고 판단되어 단독으로 사용되기 보다, 추후에 라이브러리, 플러그인과함께 사용한다. 하지만 기본적인 구조 자체를 미리 파악해두면 나중에 라이브러리, 플러그인 등을 사용할때 내용을 파악하기가 수월하기에 이를 목적으로 학습한다.

 

타이밍 이벤트 함수에는 아래와 같이 두가지가 있다.

 

메서드명 설명
setTimeout() 부여한 시간이 흐르면 딱 한 번 실행
setInterval() 부여한 시간마다 반복적으로 실행

 

앞에 set이 붙어있음으로 setter같은 역할임을 짐작할 수 있고, 이를 통해 주어가 있음을 알 수 있다. 위의 두개들의 주어는 window이다.

 

 


즉, 매개변수에 등록된 시간이 흐르면 수행할 일을 등록한 스레드를 set하는 함수들이라고 정리할 수 있다.

 

함수들의 사용 방법은 다음과 같다.

 

① setTimeout( )

<setTimeout사용방법>
setTimeout(f이름,부여할 시간);
	
//방법 1: 실행할 함수지정
setTimeout(f, 1000);
function f(){
	alert('1초 뒤에 나타날 창');
}
	
//방법 2: 익명함수로 지정
setTimeout(function(){
	alert('?');
}), 1000);

 

 

② setInterval( )

<setTimeout사용방법>
setInterval(함수, 부여할 시간)

//방법1 : 정의한 함수 호출
setInterval(f1, 2000);
function f1(){
	console.log('2초마다 출력되는 문구');
}

//방법2 : 익명함수사용
setInterval(function(){
	console.log('2초마다 출력되는 문구');
}, 2000);

 

이 함수는 계속해서 수행되기에 항상 "종료"버튼과 함께 사용된다.

 

 

2) 실습

 

① setTimeout( )활용_클릭하면 1초 후 확대되는 div

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>setTimeout()</title>

<!-- 박스 기본 스타일 -->
<style type="text/css">
	#box{
		width: 100px;
		height: 100px;
		background-color: orange;
		cursor: porinter;
	}
</style>

</head>
<body>

<div id="box"></div>

<script type="text/javascript">
	
	document.getElementById('box').onclick=function(){
		var t=this;
		setTimeout(function(){
			t.style.width='200px';//this를 사용하면 해당 스레드가 호출되기에
			t.style.backgroundColor='lightgreen';
		},1000);
	}
	
</script>

</body>
</html>

 

 

② setInterval( )활용_서서히 움직이는 div

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>setInterval()</title>

<!-- 박스 기본 스타일 -->
<style type="text/css">
	#box{
      width:100px;
      height:100px;
      background-color:orange;
      cursor:pointer;
   	}
</style>

</head>
<body>

<button onclick="move();">동작시작</button> &nbsp;&nbsp;&nbsp;
<button onclick="stop();">동작멈춤</button>
<hr>

<div id="box"></div>

<script type="text/javascript">


	var x=0;//x는 최조의 여백이며, 수행시마다 누적되어야한다.
			//stop버튼을 눌렀을때도 고정되어야하므로 해당 변수는 함수 바깥에 선언한다.
	var th;//마찬가지로 유효범위때문에 최상단 위치
	
	function move(){
		//상자가 오른쪽으로 이동하도록(왼쪽에 여백을 둠)
		th=setInterval(function(){//해당 동작을 수행하는 thread를 멈추어야한다.
			var box=document.querySelector('#box');
			x+=5; //5px씩 이동
			box.style.marginLeft=x+'px';
		}, 250);
	}

	function stop(){
		clearInterval(th);
	}
		
</script>
</body>
</html>

 

 

 

3) 예제와 풀이

예제의 요구사항은 다음과 같다.

 

1. setInterval( )활용하여 박스를 클릭하면 움직이고, 다시 클릭하면 멈추도록 구현

2. 박스가 멈추었을땐 해당 자리를 유지하지 않고, 본래의 자리로 돌아올 것.

3. 움직일땐 빨강색, 멈추었을땐 파랑색을 유지할 것.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>

<style type="text/css">
	#box{
		width:100px;
		height:100px;
		background-color:orange;
		cursor:pointer;
   	}
</style>

</head>
<body>

<div id="box" onclick="move()"></div>

<script type="text/javascript">

	var flag=true;//스위치역할
	var x=0;//최초의 여백
	var th; //interval을 수행하는 thread!
	var box=document.getElementById('box');
	
	function move(){
		if(flag){//ture면 움직이다가 클릭시 false로 전환
			th = setInterval(function(){
				x+=5;
				box.style.marginLeft=x+'px';
				box.style.backgroundColor="red";
			}, 250);
			flag=false;
		} else{ //false면 동작하지 않다가 클릭시 true로 전환
			clearInterval(th); 
			x=0;
			box.style.marginLeft=x+'px';
			box.style.backgroundColor="blue";
			flag=true;
		}
	}
	
</script>

</body>
</html>

 

* 문제풀이 ISSU *

clearInterval가 스타일 적용 문장의 하단에 있어서, 동작시에야 제자리로 돌아가는 문제 발생! 스코프의 문제로 clearInterval 상단배치를 통해 문제 해결

 

아래는 해당 문제에 대한 강사님의 풀이이다.

<meta charset="UTF-8">
<title>setInterval() 실습예제풀이</title>
<style type="text/css">
   #box{
      width:100px;
      height:100px;
      background-color:blue;
      cursor:pointer;
   }
</style>
</head>
<body>

<div id="box"></div>

<script type="text/javascript">
   var flag=false; // 멈춘상태
   var th;
   var box=document.querySelector('#box');
   
   box.onclick=function(){
      if(flag){
         // 멈추기
         flag=false;
         stop();
      }
      else{
         // 움직이기
         flag=true;
         move();
      }
   }
   
   function move(){
      box.style.backgroundColor='red';
      var x=0;
      th=setInterval(function(){
         x+=10;
         box.style.marginLeft=x+'px';
      },250);
   }
   function stop(){
      clearInterval(th);
      box.style.backgroundColor='blue';
      box.style.marginLeft=0;
   }
</script>

</body>
</html>

 

 

 

 

2. 예제

주사위게임 구현

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주사위 게임</title>

<!-- ==========================기본 스타일================================ -->
<style type="text/css">
	#container{
		margin:0 auto;
		width: 50%;
		height: 430px;
		border: 2px solid black; 
		cursor: pointer;
	}
	.start{
		height: 30px;
		background-color: plum;
		text-align: center;
	}
	.content{
		height: 400px;
		background-color: cornsilk;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	img{
		margin: 10px;
		width: 30%;
	}
</style>

</head>
<body>

<!-- ==========================레이아웃================================ -->
<div id="container">
	<div class="start">play</div>
	
	<div class="content">
		<img title="user" alt="사용자 주사위" src="image/dice (1).png">
		<img title="computer" alt="컴퓨터 주사위" src="image/dice (1).png">
	</div>
</div>

<!-- ==========================JS================================ -->
<script type="text/javascript">
	//<변수(선택자)>
	var start=document.querySelector('.start');//div class="start"
	var userDice=document.querySelector('img[title="user"]');//user주사위
	var comDice=document.querySelector('img[title="computer"]');//computer주사위
	
	//<콜백>
	start.addEventListener('click', play);
	
	//<함수정의>
 	function play(){

 		//1~6의 랜덤수
		var rand1=Math.floor(Math.random()*(7-1))+1;
		var rand2=Math.floor(Math.random()*(7-1))+1;
 		
		if(start.innerText==='play'){//play면,
			this.innerHTML="stop/result";
			userDice.setAttribute('src', 'image/dice.gif');
			comDice.setAttribute('src', 'image/dice.gif');
		}else{//stop/result면,
			this.innerHTML="play";
			userDice.setAttribute('src', 'image/dice ('+rand1+').png');
			comDice.setAttribute('src', 'image/dice ('+rand2+').png');
			
			//시간제한을 걸지 않으면 alert창이 먼저 뜸,
			//해당 부분 제어하기 위해 alert창이 뜨는 시간 텀을주어
			//사용자 입장에서 사진이 먼저 멈추고, 0.5초 후에 alert창 조회
			setTimeout(function(){
				if(rand1>rand2){
		 			alert('이겼습니다');
		 		} else if(rand1<rand2){
		 			alert('졌습니다');
		 		} else if(rand1=rand2){
		 			alert('무승부!');
		 		}
			}, 500)
		}
	}

	
</script>

</body>
</html>

 

 

* 문제풀이 ISSU *

게임 결과 조회시 알럿창이 먼저 조회되고, 확인 버튼을 눌러야만 이미지가 멈추는 문제 발생!

주석에 달아놓았다시피 timeout을 설정하여 문제 해결

 

 

 

반응형

'JavaScript' 카테고리의 다른 글

[지도 API] OpenLayers_1  (0) 2022.07.06
URL, API  (0) 2022.02.22
BOM & Form  (0) 2022.02.17
이벤트 & DOM  (0) 2022.02.16
객체(전역,Date,Math,Array)  (0) 2022.02.15

관련글

티스토리툴바