자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout()

자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout()

자바스크립트를 이용해서 일정한 시간 간격마다 혹은 일정한 시간이 지난 뒤에 특정 이벤트를 발생시키거나 동작을 취해야 할 경우가 종종 있다.

이럴 때 사용하는 자바스크립트 시간 함수가 바로 setTimeout()와 setInterval()이다.

setTimeout(), setInterval()의 가장 큰 차이점은 한 번만 실행하느냐, 계속 반복적으로 실행하느냐의 차이다.

<script>
setInterval(function() {
	yourFunction(e);
}, 1000);
setTimeout(function() {
	yourFunction(e);
}, 1000);

</script>

위의 두 예제처럼 단 한번만 적용하고 싶다면 setTimeout을 사용하고, 일정한 시간간격으로 반복 적용하고 싶다면 setInterval()을 사용하면 된다.

setInterval에서 1000이라는 숫자는 밀리세컨드로 해당 숫자의 시간 간격만큼 반복하도록 설정하는 것이다.

그런데 만일 지속적으로 반복되는 동작을 어떤 조건에서는 더 이상 반복하지 않도록 할 필요가 있다.

이럴 때 사용하는 함수는 clearinterval()이다.

setInterval()로 시작된 반복 타이머는 clearinterval() 함수로 취소되는 것이다.

마찬가지로 setTimeout() 함수로 시한 폭탄 타이머가 동작하고 있을 때 이 것을 취소하는 함수는clearTimeout()이다.

사용예제

<p id="msg"></p>
<div id="btn2">
	<button id="settime">set time</button>
	<button id="cleartime">clear time</button>
	<button id="setinterval">setinterval time</button>
	<button id="clearinterval">clearinterval time</button>
</div>

<script>
	var buttons = document.getElementsByTagName("button");
	for ( var i = 0; i < buttons.length; i++) {
		buttons[i].onclick = handleButtonPress;
	}
	var timeCheckID;
	var intervalCheckID;
	var count = 0;
	function handleButtonPress(e){
		if (e.target.id == "settime") {
			timeCheckID = window.setTimeout(function() {
			print("Timeout Expired");
		}, 2000);
		print("Timeout Set");
		} else if (e.target.id == "cleartime"){
			window.clearTimeout(timeCheckID);
		print("Timeout Cleared");
		} else if (e.target.id == "setinterval"){
			intervalCheckID = window.setInterval(function(){
			print("Interval expired. Counter: " + count++);
		}, 1000);
			print("Interval Set");
		} else if (e.target.id == "clearinterval"){
			window.clearInterval(intervalCheckID);
			print("Interval Cleared");
		}
	}
	function print(msg){
		document.getElementById("msg").innerHTML = msg;
	}
</script>

예제 테스트

예제 테스트

 

 

오늘의 짤방 : 쇼핑몰 피팅모델 핫팬츠 각선미