setTimeout()과 setInterval()의 기본 개념
JavaScript에서 비동기 작업을 처리할 때 자주 사용되는 타이머 함수로 setTimeout()과 setInterval()이 있습니다. 두 함수 모두 Web API에서 제공되며, 지정한 시간 이후에 코드를 실행한다는 공통점이 있지만 동작 방식에서 중요한 차이가 있습니다.
setTimeout() – 한 번만 실행되는 타이머
setTimeout(function, duration)은 현재 시점으로부터 duration 밀리초(ms)가 지난 후에 지정된 함수를 단 한 번만 호출합니다. 작업이 한 번 완료되면 타이머는 자동으로 종료됩니다.
예를 들어, 아래 코드는 2000밀리초(2초)를 기다린 후 콜백 함수인 alert('Hello')를 딱 한 번 실행합니다.
setTimeout(function() { alert('Hello'); }, 2000);setInterval() – 반복 실행되는 타이머
setInterval(function, duration)은 지정된 duration 밀리초마다 함수를 계속해서 호출합니다. 별도로 중지하지 않는 한 무제한으로 반복 실행됩니다.
아래 예제는 단 한 번이 아니라 2000밀리초(2초) 간격으로 alert('Hello')를 계속 트리거합니다.
setInterval(function() { alert('Hello'); }, 2000);핵심 차이점 요약
- 실행 횟수: setTimeout()은 지정 시간 후 한 번만 실행되고, setInterval()은 설정한 간격마다 무한히 반복 실행됩니다.
- 사용 목적: 일회성 지연 작업(예: 로딩 화면 숨기기)에는 setTimeout(), 주기적인 작업(예: 실시간 시계 업데이트, 폴링)에는 setInterval()이 적합합니다.
타이머 중지하기
두 함수는 호출 시 고유한 타이머 ID를 반환하며, 이 ID를 활용해 실행을 취소할 수 있습니다.
// setTimeout 취소
const timeoutId = setTimeout(() => console.log('실행 안 됨'), 3000);
clearTimeout(timeoutId);
// setInterval 취소
const intervalId = setInterval(() => console.log('반복 중'), 1000);
setTimeout(() => clearInterval(intervalId), 5000); // 5초 후 반복 중지특히 setInterval()은 중지 조건 없이 두면 브라우저 리소스를 계속 소모하므로, 필요한 시점에 반드시 clearInterval()로 정리하는 것이 좋습니다.