JavaScript clearTimeout()과 clearInterval() 메서드 완벽 정리

JavaScript에서 타이머를 다룰 때 clearTimeout()과 clearInterval() 메서드는 필수적인 역할을 합니다. 이 두 메서드는 각각 setTimeout()과 setInterval()로 설정한 작업을 취소하는 데 사용됩니다.

clearTimeout()과 clearInterval()의 차이점

clearTimeout()은 setTimeout() 함수로 예약해 둔 타임아웃(일회성 지연 실행)을 취소합니다. 반면 clearInterval()은 setInterval() 함수로 설정한 인터벌(반복 실행)을 중지시킵니다.

두 메서드 모두 setTimeout() 또는 setInterval()이 반환하는 타이머 ID를 인자로 받습니다. 따라서 나중에 취소할 가능성이 있는 타이머라면, 시작 시 반환값을 변수에 저장해 두어야 합니다.

예제 코드

아래 예제는 파란색 상자 두 개를 만들고, 버튼 클릭에 따라 색상 변경 작업을 시작하거나 취소하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .timeout {
        margin-right: 170px;
        display: inline-block;
        width: 200px;
        height: 200px;
    }
    .interval {
        display: inline-block;
        width: 200px;
        height: 200px;
    }
    .stopTimeout {
        margin-right: 100px;
    }
</style>
</head>
<body>
<h1>clearTimeout() & clearInterval() Method</h1>
<div class="timeout" style="background-color: blue;"></div>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<button class="startInterval" onclick="startInterval()">START INTERVAL</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<div class="resultTimeout"></div>
<script>
    let resInterval = document.querySelector(".resultInterval");
    let resTimeout = document.querySelector(".resultTimeout");

    function changeColor(ele) {
        if (ele.style.backgroundColor == "blue") {
            ele.style.backgroundColor = "red";
        } else {
            ele.style.backgroundColor = "blue";
        }
    }

    let timeout;
    function startTimeout() {
        timeout = setTimeout(
            changeColor.bind(this, document.querySelector(".timeout")),
            1500
        );
        resTimeout.innerHTML = "타임아웃이 시작되었습니다";
    }

    function stopTimeout() {
        clearTimeout(timeout);
        resTimeout.innerHTML = "타임아웃이 취소되었습니다";
    }

    let interval;
    function startInterval() {
        interval = setInterval(
            changeColor.bind(this, document.querySelector(".interval")),
            1500
        );
        resInterval.innerHTML = "인터벌이 시작되었습니다";
    }

    function stopInterval() {
        clearInterval(interval);
        resInterval.innerHTML = "인터벌이 중지되었습니다";
    }
</script>
</body>
</html>

실행 결과

JavaScript clearTimeout()과 clearInterval() 메서드 완벽 정리

“START TIMEOUT”과 “START INTERVAL” 버튼을 클릭하고 몇 초간 기다리면, 각 상자가 1.5초마다 빨간색과 파란색으로 번갈아 바뀌는 것을 확인할 수 있습니다.

JavaScript clearTimeout()과 clearInterval() 메서드 완벽 정리

이후 “STOP TIMEOUT”과 “STOP INTERVAL” 버튼을 클릭하면 해당 타이머가 즉시 취소되어 더 이상 색상이 변경되지 않습니다.

JavaScript clearTimeout()과 clearInterval() 메서드 완벽 정리

정리 및 활용 팁

clearTimeout(timerId): setTimeout()으로 예약된 한 번의 실행을 취소합니다.
clearInterval(timerId): setInterval()로 설정된 반복 실행을 중지합니다.
취소하려는 타이머의 ID는 반드시 변수에 저장해 두어야 합니다.
이미 실행이 완료된 타이머나 존재하지 않는 ID를 전달하더라도 에러는 발생하지 않으며, 아무 동작도 하지 않고 조용히 무시됩니다.
SPA(싱글 페이지 애플리케이션)에서 컴포넌트가 언마운트될 때 타이머를 정리(cleanup)하지 않으면 메모리 누수나 의도치 않은 동작이 발생할 수 있으므로 주의해야 합니다.