[javascript] setInterval, clearInterval ( +setTimeout 차이점) 알아보자!

오늘은 자바스크립트의 내장 함수 중 시간을 다루는 setInterval과 clearInterval 함수에 대해서 알아보려고 한다. 지난번에는 setTimeout 함수에 대해 알아보았는데, 유사하지만 다른 특징이 있기 때문에 setInterval에 대해서도 정리해보려고 한다.
setTimeout 함수는 지정된 지연 시간이 지난 후 1회만 실행되고 종료되지만, setInterval은 지정된 시간이 지날 때마다 주기적으로 실행이 되는 차이점이 있다. 그렇기 때문에 상황에 따라서 setTimeout을 사용할지, 아니면 setInterval을 사용할지 고려하고 사용하는 것이 중요하다.

 

---

setInterval

setInterval 함수는 일정한 시간 간격마다 지정된 함수를 반복적으로 실행하는 자바스크립트의 타이머 함수 중 하나다. 

기본 문법

setInterval(callback, delay, arg1, arg2, arg3, ...);

위의 코드는 setInterval 함수의 기본 문법이며, 위와 같이 매개변수를 받고 있다.

callback : 반복적으로 실행되는 함수
delay : 함수를 실행하는 간격(ms)
arg1, arg2, arg3, ... : 선택적 매개변수로 콜백 함수에 전달한 인수

setInterval 함수는 지정된 시간 간격마다 콜백 함수를 실행하며, 처음에는 지정된 시간 이후에 한 번 즉시 실행되며, 그 이후로는 간격마다 반복해서 실행된다. (여기서 최초 한번 즉시 실행된다는 부분이 특징이다. 이 부분을 잘 모르고 있다면 지정된 시간이 지나야 실행되는 것으로 알고 기능을 구현할 수 있다)

setInterval 함수는 중지되기 전까지 지속적으로 콜백 함수를 실행한다. 따라서 명시적으로 함수를 중지하기 전까지 계속 실행되는 것이며, clearInterval 함수를 사용해서 실행 중인 interval을 중지시켜줘야 한다.

setInterval 함수는 비동기적으로 동작하므로, 콜백 함수가 실행되는 동안 다른 코드가 실행될 수 있고, 
setInterval 함수는 정확한 시간 간격을 보장하지 않는다. 그렇기 때문에 브라우저나 환경에 따라 실행이 지연될 수 있으며, 이는 누적되어 정확한 시간 간격이 보장되지 않을 수 있다.

setInterval 함수는 일정한 주기로 반복적인 작업이 필요한 경우에 유용하게 사용되며, 주기적으로 UI를 업데이트하거나 백그라운드 작업을 수행하는 등 다양한 상황에 활용할 수 있다.

---

setInterval 함수의 활용 사례

setInterval 함수는 일정한 시간 간격으로 반복 작업을 수행하는 데 사용되며, 몇 가지 활용 사례가 있다.

실시간 업데이트
웹 페이지에서 실시간으로 정보를 업데이트해야 할 경우 setInterval 함수를 사용할 수 있다. 예를 들어, 주식 가격, 날씨 정보, 실시간 채팅 등의 경우 setInterval 함수를 활용할 수 있다.

애니메이션
웹 페이지나 앱에서 애니메이션 효과를 만들 때 setInterval 함수를 활용할 수 있으며, 일정한 간격으로 이미지를 변경하거나 DOM 요소의 위치를 조정하여 부드러운 애니메이션 효과를 구현할 수 있다.

실시간 감시 및 알림
서버나 외부 API와 통신하여 데이터를 주기적으로 확인하고, 변경 사항이 발생했을 때 사용자에게 알림을 제공하는 기능을 구현할 때 setInterval 함수를 사용할 수 있다. 예를 들어, 새로운 이메일이 도착했을 때 알림을 표시하는 등의 기능에 활용할 수 있다.


위와 같은 방법 외에도 setInterval 함수는 다양한 상황에서 사용될 수 있으며, 주기적인 작업이 필요한 경우에 유용하게 활용될 수 있다. 그러나, 과도한 사용은 성능 저하를 발생시킬 수 있으며, 그렇기 때문에 적절한 시간 간격을 설정하는 것이 중요하고, 적절하게 함수를 중지시켜 주는 것이 좋다.

---

setInterval 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // sleep 초 단위 
    const sleepTime = 2000;

    // 화면에 보여줄 count
    let intervalCount = 1;

    // intervalId
    const intervalId = document.querySelector('#intervalId');

    // default count 
    intervalId.textContent = intervalCount++;

    /**
     * setInterval 함수 실행
     */
    setInterval(function () {

        intervalId.textContent = intervalCount;

        // count 1씩 증가
        intervalCount++;
    }, sleepTime);
});

</script>
<div>interval</div>
<hr>
<div>
    <span>setInterval : </span>
    <span id="intervalId"></span>
</div>

위의 코드는 setInterval 함수를 사용하여 일정한 시간 간격마다 반복적으로 특정 작업을 수행하는 예제다. intervalCount로 지정된 수치형 변수를 선언하고 2초마다 intervalCount를 증가시켜 span 태그에 동적으로 값이 변경되는 내용이다.

setInterval 함수는 첫 번째 매개변수로 전달된 콜백 함수를 두 번째 매개변수로 전달된 시간 간격마다 반복적으로 실행한다.
여기서 2초 (sleepTime) 마다 콜백 함수가 실행된다. 콜백 함수는 intervalId 요소의 텍스트 내용을 갱신하고 intervalCount 값을 1씩 증가시킨다.

2초마다 count +1씩 증가

위의 결과 화면은 2초마다 count가 1씩 증가되는 모습이다.

setTimeout과의 차이점

위의 예제를 보게 되면 함수를 만드는 방식은 setTimeout과 동일하고 함수명만 다르게 주면 된다.

코드의 작성 방법은 거의 동일하나 실행되는 시점과 동작이 다르게 된다. 
왼쪽의 setInterval은 최초 즉시 실행 후 1초마다 반복 실행이 되고,
오른쪽의 setTimeout은 1초 후 실행 후 종료된다.

setTimeout은 지정된 시간이 너무 길지만 않으면 실행 후 종료가 되지만, setInterval의 경우에는 초기화를 시켜주지 않으면 무한 반복 실행이 될 수 있으며, 이러한 경우에는 clearInterval 함수를 통해서 interval을 종료시켜줄 수 있다.

 

---

clearInterval

clearInterval 함수는 setInterval 함수로 설정한 반복 작업을 중지시키는 데 사용된다.

기본 문법

const intervalId = setInterval(function () {
    // 반복적으로 실행되는 작업
}, delay);
clearInterval(intervalId);

위의 코드는 clearInterval 함수를 사용하는 기본 문법 코드이며, setInterval 함수에 의해 반환된 intervalId를 인수로 받아서 해당 interval ID에 해당하는 반복 잡업을 중지시킨다.
setInterval 함수가 실행될 때 반환된 intervalId가 clearInterval 함수에 전달되어야 한다.

clearInterval 함수를 사용하여 setInterval 함수로 설정된 반복 작업을 중지할 수 있으며, 이를 통해 불필요한 작업의 실행을 방지하고, 메모리와 성능을 효율적으로 관리할 수 있다.

---

clearInterval 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    // sleep 초 단위 
    const sleepTime = 2000;

    // 화면에 보여줄 count
    let intervalCount = 0;

    // intervalId
    const intervalId = document.querySelector('#intervalId');

    // default count 
    intervalId.textContent = intervalCount++;

    /**
     * setInterval 함수 실행
     */
    let intervalFunc = setInterval(function () {

        intervalId.textContent = intervalCount;

        if (intervalCount === 5) {
            /**
             * clearInterval 함수를 사용하여 interval 종료
             */
            clearInterval(intervalFunc);
            // 종료시 clear 문구 추가
            document.querySelector('#clearId').textContent = 'clear !';
        }
        // count 1씩 증가
        intervalCount++;
    }, sleepTime);
});

</script>
<div>interval</div>
<hr>
<div>
    <span>setInterval : </span>
    <span id="intervalId"></span>
</div>
<div>
    <span id="clearId"></span>
</div>

위의 코드는 setInterval 함수의 예제 코드를 활용해 clearInterval 함수를 추가한 예제 코드다. 여기서 clearInterval 함수가 사용되는 시점은 intervalCount가 5가 되었을 때 실행된다. clearInterval 함수는 인수로 intervalFunc 함수명을 받아서 이전에 설정한 반복 작업을 중지시킨다. 그 후에는 'clear !' 텍스트가 있는 요소에 해당 내용이 표시된다.

위와 같이 clearInterval 함수를 사용하면 setInterval 함수로 설정한 반복 작업을 특정 조건이 충족될 때 중지시킬 수 있다. 

실행 결과

5가 되면 interval은 멈추고 clear 문구 출력

위의 결과 화면은 코드를 실행한 화면이다. intervalCount가 5가 되었을 때 interval이 clear되는 결과다.

---

setInterval 함수 사용 시 주의사항

setInterval 함수를 활용하는 경우는 다양하지만 시간을 다루며 기능을 구현하기 때문에 주의해야 할 사항들이 있다.

메모리 누수
setInterval 함수를 사용하여 반복 작업을 수행하는 경우에는 해당 작업이 끝나지 않은 상태에서 다음 작업이 실행될 수 있다. 이로 인해 메모리 누수가 발생할 수 있으므로, setInterval을 사용할 때에는 작업이 완료되었는지 항상 확인해야 한다. 즉, 먼저 실행된 함수가 종료되기 전에 다음 함수가 실행되면서 중첩으로 함수들이 실행될 수 있으며, 이로 인해 메모리 사용량이 늘어나 성능에 문제가 될 수 있다. 추가로 함수의 실행이 중첩되며 데이터 처리가 문제가 될 수 있기 때문에 반드시 이전 함수의 종료를 확인해줘야 한다.

간격 설정
너무 짧은 간격으로 반복 작업을 수행하는 경우, 브라우저가 과도한 리소스를 소비하게 되어 성능 문제를 일으킬 수 있다. 따라서 너무 짧은 간격으로 setInterval을 설정하지 않도록 주의해야 한다. 위에서 설명한 내용과 유사하며, 간격이 너무 짧아 먼저 실행된 함수와 중첩될 수 있는 문제다.

비동기 작업 처리
setInterval 함수 내에서 비동기 작업을 수행하는 경우, 작업이 완료될 때까지 다음 작업이 실행되지 않을 수 있다. 이를 방지하기 위해 비동기 작업 내에서 setInterval을 중지하는 등의 조치를 취해야 한다.

함수 해제
setInterval 함수를 사용한 작업이 더 이상 필요하지 않을 때에는 반드시 clearInterval 함수를 사용하여 해당 작업을 중지시켜줘야 한다. 그렇지 않으면 불필요하게 리소스가 소비될 수 있다.

시간의 정확성
setInterval 함수는 정확한 시간 간격으로 작업을 수행하지 않을 수 있으며, 시간이 정확하게 맞아떨어져야 하는 작업에는 다른 방법을 고려해야 한다.


위의 정리한 바와 같이 setInterval 함수를 사용할 때에는 실행 함수의 중첩과 메모리 누수, 시간 문제 등의 주의사항들을 고려하는 것이 중요하다.

---

마무리

이렇게 자바스크립트의 setInterval과 clearInterval 함수에 대해 정리해 보았는데, 기능의 활용도보다는 주의해야 할 것들이 많다 보니 업무에 적용을 한다면 다양한 방면으로 고려를 해야 한다. 그렇지 않으면 생각밖에 이슈들이 발생할 수 있으며, 서비스 품질이 저하될 수 있는 큰 단점이 될 수 있어 setInterval 함수를 사용할 때에는 꼼꼼히 체크하고 조심히 다뤄야 한다.

UI 개발은 동적인 기능과 비동기 서비스 구현을 많이 하다보니 생각보다 시간을 다루는 상황을 많이 마주하게 된다. 이러한 경우에 setInterval 함수를 정말 많이 사용하게 된다. 위에서 정리한 내용 외에도 interval을 다룰 때의 주의사항들을 꼭 체크하는 것이 좋다.

 

* setTimeout 설명 링크

https://sancode.tistory.com/14

[javascript] setTimeout 알아보기! ( + 날짜 포맷 parseDate )