JavaScript에서 setTimeout() 함수로 타이머를 설정했다면, clearTimeout() 함수를 사용하여 해당 타이머를 취소할 수 있습니다.
clearTimeout() 함수란?
clearTimeout()은 setTimeout() 호출 시 반환되는 타이머 ID를 인자로 받아, 아직 실행되지 않은 예약된 작업을 취소하는 역할을 합니다. 예를 들어 일정 시간 후에 실행되도록 예약해 둔 함수가 있다면, 그 시간이 되기 전에 clearTimeout()을 호출하면 해당 함수가 실행되지 않습니다.
이 함수는 애니메이션 반복 실행을 중단하거나, 지연 실행 작업을 조건에 따라 취소해야 할 때 매우 유용하게 활용됩니다.
예제
다음 코드를 실행하면 JavaScript에서 clearTimeout() 함수를 구현하는 방법을 직접 확인할 수 있습니다. Start 버튼을 누르면 이미지가 오른쪽으로 계속 이동하고, Stop 버튼을 누르면 setTimeout()으로 예약된 반복 작업이 clearTimeout()에 의해 취소되어 애니메이션이 멈춥니다.
<html>
<head>
<title>JavaScript Animation</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>
동작 원리 살펴보기
1. 타이머 설정
moveRight() 함수 내부에서 setTimeout(moveRight, 20)이 호출될 때마다 20밀리초 후 자기 자신을 다시 실행하도록 예약하며, 그 결과로 반환되는 타이머 ID를 animate 변수에 저장합니다. 이렇게 함수가 스스로를 반복 호출하는 방식으로 애니메이션이 구현됩니다.
2. 타이머 취소
stop() 함수가 호출되면 clearTimeout(animate)가 저장된 타이머 ID를 참조하여 아직 실행되지 않은 moveRight() 예약을 취소합니다. 이후 이미지의 left 값을 '0px'로 초기화하여 원래 위치로 되돌립니다.
사용 시 주의 사항
- clearTimeout()에는 반드시 setTimeout()이 반환한 타이머 ID를 전달해야 합니다. 잘못된 값을 넘기면 아무 동작도 하지 않으며 오류도 발생하지 않습니다.
- 이미 실행이 완료된 타이머에 대해 clearTimeout()을 호출해도 에러가 발생하지 않으므로 안전하게 사용할 수 있습니다.
- setInterval()로 설정한 반복 타이머를 취소할 때는 clearInterval()을 사용해야 합니다.