setTimeout, setInterval의 심화 사용법 (개발 시 시간 처리에 관하여)

최근에서야 setTimeout, setInterval의 제대로 된 사용법을 알게 되었습니다.
많은 분들이 아는 setTimeout, setInterval의 일반적인 사용법은 아래와 같을 겁니다.

// setTimeout
setTimeout(() => {
    console.log('3초 후 실행');
}, 3000);

// setInterval
setInterval(() => {
    console.log('매 2초마다 실행');
}, 2000);

하지만 위처럼 간단한 사용법 말고도 더욱 많은 사용법과 응용법이 있다는 것을 알게 되어 공유해 보려 합니다.

---

setTimeout과 setInterval의 심화 사용법

setInterval(add, 1000, 3, 4, 5); // 인자는 계속 추가할 수 있습니다.
function add(x, y, z) {
    console.log(x + y + z); // 1초마다 12 출력
}

• setTimeout과 setInterval은 콜백 함수에 인자를 전달할 수 있습니다.
• 순서대로 함수, 시간, 인자(계속 추가 가능)를 넣을 수 있습니다.

---

setTimeout을 재귀함수처럼 사용하기

function intervalLike() {
    console.log('1초 간격으로 실행');
    setTimeout(intervalLike, 1000);
}
intervalLike();

setInterval을 사용해도 되지만, 조건 만족 시 이벤트를 종료해야 할 때가 있습니다.
이때 setTimeout을 재귀함수처럼 사용하면 쉽게 반복 이벤트를 중지할 수 있습니다.

예를 들면 일정 시간이 지난다면 로그아웃, 로그인 연장 버튼을 클릭하면 다시 10분 동안 접속 가능.
이러한 기능을 쓸 때 사용할 수 있겠네요.

---

setTimeout과 setInterval 사용 시 발생하는 레이턴시

• JavaScript의 setTimeout과 setInterval은 정확한 타이머가 아닙니다.
• 컴퓨터가 아무리 정확해도 실제로 코드가 실행되기까지 아주 작은 지연 시간이 발생할 수 있습니다.
• setTimeout처럼 단발성이면 크게 상관없으나 setInterval과 같은 여러 번 호출되는 함수의 경우 극단적으로 횟수가 반복되면 정해진 시간과 발동에 차이가 있을 수 있습니다.

---

시간 제어 시 UTC와 비교하기

개발 시 종종 예상치 못한 "시간 계산"에 의해 문제가 생기고는 합니다.

• 개발 시에는 대부분의 상황에서 컴퓨터의 로컬 시간 대신 UTC(Universal Time Coordinated, 협정세계시) 시간을 사용합니다.
  특히 서버 및 클라이언트 간 시간 동기화가 중요한 경우,
  UTC 시간을 사용하여 로컬 시간대 차이에 따른 오류를 줄일 수 있습니다.
• 서버 컴퓨터처럼 자주 종료하지 않는 컴퓨터나 업데이트를 진행하지 않는 컴퓨터의 경우 심하면 몇 분까지도 시간 차이가 생길 수 있습니다!
• 가장 좋은 시간 관리 법은 매일 새벽 시간을 체크하여 어긋남이 있을 경우 바로 맞춰주는 방식입니다.
  시간을 체크했다는 로그와 어긋난 시간을 수정하였다는 로그도 있으면 더욱 좋겠지요.

---

setInterval 사용 후 정리하기

최근 메모리 누수의 무서움과 메모리 관리 중요성에 대해 절절히 깨닫고 있습니다.
요 며칠 블로그 글이 적게 나온 이유입니다.

let timerId = setInterval(() => {
    console.log('실행 중');
}, 1000);

// 특정 조건에서 타이머 정리
setTimeout(() => {
    clearInterval(timerId);
    console.log('setInterval 종료');
}, 5000);

---

이번 일을 계기로 JS 기본 함수에 대해 이해가 부족했음을 깨달았습니다.

생각해 보면 지금까지 바쁘다는 이유로 스쳐 보낸 내용들이 많았는데
기본기도 다시 공부할 겸 이번처럼 괜찮은 내용을 찾으면 다시 글로 찾아뵙겠습니다.

---

참고 문헌:

setTimeout() 전역 함수 - Web API | MDN