일정시간 반복실행 함수 setInterval(), clearInterval()

제목 그대로 일정시간마다 특정 이벤트를 반복적으로 실행시켜주는 함수입니다.

​

setInterval 사용법

const playRepeat = setInterval(function(){
	//이 곳에 본인이 원하는 이벤트 코드를 작성하시면 되며 예를 들기 위해 alert() 적용했습니다.
	alert("일정시간 반복실행 함수입니다.");
}, 5000);

위 기본 예제를 보면 5초 마다 "일정시간 반복실행 함수입니다." 라는 경고창이 뜰 것입니다.

​

그렇다면! 반대로 해당 반복실행을 멈출 수도 있겠죠??

​

그것이 바로 clearInterval() 함수입니다.

​

clearInterval 사용법

clearInterva(playRepeat);

​

위 기본 예제를 보면 playRepeat 이라는 변수는 위 setInterval 사용법 을 설명할 때 지정한 것이고, 결과적으로 반복실행되던 alert()의 실행을 중지시킵니다.

​

​

그럼 이제 실제 적용하는 방법에 대해 얘기하겠습니다.

​

<button type="button" onClick="startInterval();">interval 시작</button>
<button type="button" onClick="endInterval();">interval 종료</button>

<script>
//변수를 전역변수로 선언 해놓고 interval 시작버튼을 눌게 되면 해당 변수에 setinterval() 함수가 담기게 됩니다.
//그 후에 종료버튼을 누르면 playReapeat 이라는 변수에 담긴 반복함수가 중지되는거죠!!

let playRepeat;
function startInterval(){
	playRepeat = setInterval(function(){
		alert("alert창이 5초마다 뜰꺼에요~!");
	}, 5000);
}

function endInterval(){
	clearInterval(playRepeat);
}
</script>