[JavaScript]내장함수 - setTimeout/setInterval/clearTimeout/clearInterval

Frontend/JavaScript

[JavaScript]내장함수 - setTimeout/setInterval/clearTimeout/clearInterval

sukii 2024. 1. 4. 18:36

🤔내장함수란?

브라우저 내부에 선언되어 있는 함수

시간 경과에 따른 명령 실행 함수
setTimeout(callback, ms) : 시간(ms) 경과 후 콜백함수를 한번만 호출하여 콜백함수의 명령을 실행하는 함수 - timeoutId(setTimeout 함수를 구분하기 위한 식별자) 반환
clearTimeout(timeoutId) : setTimeout 함수의 식별자(timeoutId)를 매개변수로 전달받아setTimeout 함수를 취소하는 함수
setInterval(callback, ms) : 시간(ms) 경과마다 콜백함수를 반복적으로 호출하여 콜백함수의 명령을 실행하는 함수 - intervalId(setInterval 함수를 구분하기 위한 식별자) 반환
clearInterval(intervalId) : setInterval 함수의 식별자(intervalId)를 매개변수로 전달받아 setInterval 함수를 취소하는 함수

실습예제👩‍💻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>	
	<script type="text/javascript">
	//setInterval 함수의 첫번째 매개변수에 익명함수를 선언하여 전달
	// => setInterval 함수 내부에서 자동으로 호출 - Callback 함수
	//방법1)
    var id=setInterval(function() {
		//시간 경과마다 실행될 명령 작성
		alert("setInterval 함수에 의해 반복 실행되는 명령");
	}, 1000);

	//방법2)
	var id=setInterval(() => alert("setInterval 함수에 의해 반복 실행되는 명령"), 1000);	
	
    //5초 뒤에 id에 저장된 setInterval 함수를 취소
    //setTimeout을 사용했기 때문에 1번만 실행됨
	setTimeout(function() {
		clearInterval(id);
	}, 5000);	
	</script>
</body>
</html>