SetInterval과 clearInterval 활용 예제

갤러리 배열

이번 예제는 jquery로 setInterval 함수와 clearInterval 함수를 연습하기 위한 예제입니다

1. 시작 버튼을 누르면 물고기가 바 위에서 좌우로 이동하면서 움직인다.
2. 물고기의 머리는 항상 이동하는 방향을 향한다.
3. 멈춤 버튼을 누르면 물고기가 멈춘다.
4. 멈춤 버튼을 눌렀다가 시작 버튼을 누르면 이전 움직이던 방향 그대로 다시 물고기가 움직인다.
5. 물고기가 멈췄을때 리소스 절약을 위해 setInterval 함수가 해제되어야 한다
6. #bar{ width: 500px; height: 10px; background-color: red;}
   #fish{ position: relative; width:80px; transform:rotateY(180deg);}
   물고기 src : https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332
   물고기는 300px의 거리를 왔다갔다 한다
7. 참고할 예제: 2016/02/07 - [CODE/JQuery] - 이미지를 x축 이동시키기

아래는 예제를 완성시킨 모습입니다.

이 예제의 코드

<style> #bar{ width: 500px; height: 10px; background-color: red;} #fish{ position: relative; width:80px; transform:rotateY(180deg);} </style> <div id="dropingSelection"> <img src="https://t1.daumcdn.net/cfile/tistory/2637484856B21E3332" alt="물고기!" id="fish"> <div id="bar"></div> </div> <div id="nav"> <input type="button" value="시작" id="btnStart"><input type="button" value="멈춤" id="btnStop"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script> var moveOrNot = 0; <span style="color: rgb(189, 189, 189);">//물고기의 상태를 나타내는 변수이다. 1:정방향, 0:정지, -1:역방향</span> var beforemoveOrNot =0; //이전의 물고기 상태를 저장하는 변수 var position = 0; //현재 물고기의 위치를 나타내는 변수 var timerID =0; $("#btnStart").click(function(){ if (moveOrNot ==0) { //물고기가 움직이지 않는 상태에서만 작동 moveOrNot = beforemoveOrNot; //이전 상태를 불러와서 작동한다 timerID = setInterval(function(){ if (position == 300) { //물고기가 끝에 다다르면 moveOrNot = -1; //물고기가 역방향으로 이동한다 $("#fish").css("transform","rotateY(0deg)") //물고기 이미지를 뒤집는다 }else if (position == 0) {//물고기가 끝에 다다르면 moveOrNot = 1;//물고기가 정방향으로 이동한다 $("#fish").css("transform","")//물고기 이미지를 뒤집는다 } position+=5*moveOrNot; //물고기의 위치를 이동시킨다 $("#fish").css("left",position + "px") },50) //0.02초마다 이동 } }) $("#btnStop").click(function(){ if (moveOrNot !=0) { //물고기가 움직이는 상태에서만 작동 beforemoveOrNot = moveOrNot; //현재 물고기의 상태를 저장하고 moveOrNot = 0; //물고기상태 멈춤으로 설정 clearInterval(timerID) //인터벌 해제 } }) </script>