JavaScript에서 함수의 실행을 중지하려면 clearTimeout() 메서드를 사용합니다. 이 메서드는 setTimeout() 함수로 설정된 타이머를 제거하여, 아직 실행되지 않은 예약된 함수 호출이 더 이상 수행되지 않도록 합니다.
clearTimeout() 메서드의 동작 원리
setTimeout()은 지정한 시간(밀리초 단위)이 지난 뒤 특정 함수를 한 번 실행하는 타이머를 생성하고, 고유한 타이머 ID를 반환합니다. 이 ID를 clearTimeout()에 전달하면 예약된 함수가 실행되기 전에 취소할 수 있습니다.
단, 이미 실행이 시작된 함수 자체를 강제로 종료할 수는 없으며, 오직 아직 호출되지 않은 예약 작업만 중단할 수 있다는 점에 유의해야 합니다.
예제: 버튼으로 애니메이션 시작 및 정지하기
다음 코드는 이미지가 오른쪽으로 이동하는 간단한 애니메이션 예제입니다. Start 버튼을 클릭하면 setTimeout()이 20밀리초마다 moveRight() 함수를 반복 호출하고, Stop 버튼을 클릭하면 clearTimeout()이 타이머를 해제하여 애니메이션이 멈춥니다.
<html>
<head>
<title>JavaScript clearTimeout() 메서드</title>
<script>
<!--
var imgObj = null;
var animate;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight, 20); // 20밀리초 후에 moveRight 호출
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>아래 버튼을 클릭하여 애니메이션을 제어해 보세요.</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
참고: 반복 실행 타이머의 경우
일정한 간격으로 함수를 반복 실행하려면 setInterval()을 사용하며, 이때는 clearInterval() 메서드로 반복을 중지할 수 있습니다. 사용 방법은 setTimeout()과 clearTimeout()의 조합과 동일합니다.