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

자바스크립트에서 기본 함수 중에서 정말 많이 사용되는 setTimeout 함수에 대해서 정리해 보려고 한다. UI 개발을 한다면 정말 다양한 환경에서 setTimeout 함수를 필요로 할 것이고, 단순하게 사용하면 간단하지만 함수의 활용도가 높기 때문에 조금 더 깊이 있게 숙지해 둔다면 좋을 것 같다.

처음 함수를 공부할 때에는 setInterval과 유사하다 보니 헷갈리기도 하고 많이 헤맸던 기억이 있다. 하지만 다양한 상황을 겪으면서 활용하다 보니 생각보다 빠르게 기능을 익혔던 기억이 있다. UI 개발은 생각보다 동적으로 처리해야 하는 부분이 많기 때문에 모든 프로세스를 한 번에 딱! 맞춰서 처리하기보다는 상황에 맞게 비동기로 처리되어야 하는 경우도 있다. 이러한 경우에 setTimeout을 적절히 잘 활용한다면 간단하면서 큰 퍼포먼스를 보여줄 수 있다.

---

setTimeout

setTimeout 함수는 일정한 시간이 지난 후에 특정한 코드 블럭이나 함수를 실행하는 자바스크립트의 타이머 함수 중 하나다. 주어진 시간이 지난 후에 지정된 작업을 실행하는 것이 특징이다.

기본 구문

setTimeout(function, delay);

function : 실행하고자 하는 함수나 코드 블럭을 지정
delay : 실행을 지연할 시간(ms)을 지정

setTimeout 함수는 주로 비동기적인 작업을 수행하고자 할 때 사용된다. 예를 들어, 일정 시간이 지난 후에 특정한 애니메이션을 시작하거나, 사용자의 입력에 대한 응답을 지연시키는 등의 용도로 활용될 수 있다.

그리고, setTimeout 함수의 반환값은 타이머 식별자이며, 이 값을 사용하여 타이머를 취소하거나 제어할 수 있다. 타이머를 취소하려면 clearTimeout 함수를 사용하면 된다.

이 함수를 사용할 때에는 실행 시간과 관련된 주의사항을 고려해야 하는데, 특히 일정 시간 이후에 실행되는 코드는 현재 실행 중인 코드와 별개로 실행되므로 이로 인해 예기치 못한 동작이 발생하지 않도록 주의해야 한다.

---

setTimeout 함수의 활용 사례

setTimeout 함수는 다양한 상황에서 활용될 수 있다. 이 함수는 특히 시간, 비동기 처리를 할 때 주로 활용된다.

애니메이션 및 시간 지연 효과
웹 페이지나 애플리케이션에서 애니메이션 효과를 생성하거나, 특정한 동작을 지연시킬 때 사용된다. 예를 들어, 화면에 요소를 fadein / fadeout 하거나 슬라이드 효과를 적용하는 경우 setTimeout 함수를 활용하여 일정한 시간 후에 해당 요소에 스타일을 적용할 수 있다.

비동기 작업 처리
비동기 작업을 수행할 때 사용되며, 서버로부터 데이터를 가져오는 등의 비동기 작업이 완료된 후에 특정한 동작을 수행하도록 설정할 수 있다.

사용자 경험 향상
사용자 경험을 향상시키기 위해 사용된다. 예를 들어, 사용자가 특정 작업을 수행하기 전에 잠시 대기할 때 사용자에게 메시지를 보여주고 일정 시간이 지난 후에 메시지를 숨기는 등의 동작을 구현할 수 있다.

재시도 및 폴링
서버로부터 데이터를 가져오는 작업이 실패했을 때 일정 시간 후에 재시도하거나, 주기적으로 데이터를 가져오는 폴링 기능을 구현할 때 사용된다.

시간 기반 이벤트 처리
특정한 시간이 경과한 후에 이벤트를 발생시키는 동작을 구현할 때 사용된다. 예를 들어, 특정한 시간에 푸시 알림을 보내는 등의 작업을 수행할 수 있다.

---

setTimeout 함수의 예제 소스 코드

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

    // 현재 시간
    document.querySelector('#beforeDateId').textContent = parseDate(new Date());

    // setTimeout 실행
    setTimeout(() => {
        // afterDateId dom 영역에 현재 시간 +1초 세팅
        document.querySelector('#afterDateId').textContent = parseDate(new Date());
    }, sleepTime * 1000);
});

/**
 * 날짜 parsing
 */
function parseDate (date) {
    let h = date.getHours();
    let m = date.getMinutes();
    let s = date.getSeconds();
    
    return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${s < 10 ? '0' + s : s}`;
}
</script>
<div>setTimeout</div>
<hr>
<div>
    <span>현재 시간 : </span>
    <span id="beforeDateId"></span>
</div>
<div>
    <span>현재 시간 : </span>
    <span id="afterDateId"></span>
</div>

가장 먼저 setTimeout을 실행하기 위해 초단위 정보를 설정해 주다.

const sleepTime = 3;

함수의 형태를 보게 되면

function (() => {

}, 1000);

일반 함수에서 뒤에 1000 값을 설정해 주었다.

1000 = 1초 

1초 후에 함수를 실행하겠다는 의미다.

설정하기 나름대로 1초 미만으로 주고 싶을 때에는 100, 200, 300... 등 설정이 가능하다.

예제 코드에서는 sleepTime에 3을 설정하고 setTimeout 함수에서 * 1000을 해서 3초(3000)로 설정될 수 있게 코드를 작성하였다.

3으로 설정하였으니 3초 후에 함수가 실행

기본으로 new Date()를 생성하여 현재 시간을 찍어주고, setTimeout 함수 내에서 설정한 3초 후에 동일하게 new Date()를 생성하여 3초 뒤의 시간을 찍어주었다.

반응형

---

setTimeout과 setInterval의 차이

setTimeout와 유사한 함수로 setInterval 함수가 있다. 기능의 차이는 명확하지만 시간을 제어해서 함수를 실행한다는 공통점이 있어 기능을 처음 접한다면 헷갈릴 수 있다.

setTimeout 함수는 지정된 시간 지연 후 한번만 코드를 실행하고, setInterval 함수는 지정된 시간마다 코드를 주기적으로 반복 실행한다.
setInterval은 처음 최초 실행 이후 지정된 시간마다 실행된다는 특징이 있다.

실행 주기
setTimeout은 한 번의 지연 실행을 수행하고 종료한다. 반면에 setInterval은 지정된 시간 간격마다 주기적으로 실행된다.

재설정
setTimeout은 한 번 실행된 후에는 자동으로 종료된다. 즉 한 번 실행 후 자동으로 해제된다. 반면에 setInterval은 명시적으로 clearInterval 함수를 호출하여 중지하기 전까지 지속된다.

타이머 ID
setTimeout과 setInterval 함수는 각각 실행된 타이머의 ID를 반환한다. 이 ID는 타이머를 취소하거나 제어하는 데 사용된다. clearTimeout 또는 clearInterval 함수를 사용하여 실행을 취소할 수 있다.

이러한 차이점들을 고려해서 setTimeout과 setInterval을 적절한 상황에 선택해서 사용하는 것이 중요하다. 
일회성 시간 지연이 필요한 상황에서는 setTimeout을 사용하고, 주기적인 실행이 필요한 경우에는 setInterval을 사용하면 된다.

---

setTimeout 함수 사용 시 주의사항

setTimeout 함수는 시간을 다루는 함수이기 때문에 사용할 때 주의해야 할 부분이 있다. 

지연 값
지연 값은 실행이 보장되지 않기 때문에 브라우저나 환경에 따라 다를 수 있다.

비동기 처리
setTimeout은 비동기 함수이므로, 다른 코드와 병행하여 실행되기 때문에 코드의 실행 순서를 보장하지 않으므로 주의해야 한다.

콜백 함수 내부의 this
setTimeout의 콜백 함수 내부에서 this는 window 객체를 가리킨다. 따라서 콜백 함수 내부에서 객체의 메서드를 사용하려면 주의해야 한다.

타이머 해제
setTimeout을 사용하여 설정한 타이머는 clearTimeout 함수를 사용하여 중지할 수 있다. 따라서 타이머가 불필요하게 실행되는 것을 방지하기 위해 타이머를 해제하는 것이 중요하다.

메모리 누수
setTimeout에 대기 중인 타이머는 해당 페이지나 스크립트가 종료되기 전까지 유지된다. 따라서 필요하지 않은 경우에는 타이머를 해제하여 메모리 누수를 방지해야 한다.

재귀 호출 주의
setTimeout을 사용하여 재귀 호출을 구현할 때는 재귀 호출이 무한히 반복되지 않도록 주의해야 한다. 충분한 종료 조건을 설정하여 무한 반복을 방지해야 한다.

---

마무리

오늘은 이렇게 setTimeout 함수에 대해서 정리해 보았다. 함수의 특징, 활용 사례, 예제, 주의사항 등을 정리하면서 조금 더 깊이 있게 알아볼 수 있었다. UI 개발을 하려면 자바스크립트는 가장 기본이 되고, 시간 관련된 함수는 항상 필요로 하기 때문에 숙지해 두는 것이 좋다.
그리고 setTimeout 함수는 시간을 다루기 때문에 항상 누수가 되지는 않을지, 이슈가 발생했을 때 clear 처리하는 부분까지 항상 고려하는 것이 중요하다.

마지막으로 setTimeout과 setInterval은 유사하지만 다른 점이 있다는 차이를 알고, 적재적소에 맞게 함수를 활용하여 기능을 구현하는 것이 좋다.