자바스크립트 타이머 함수: setTimeout(), setInterval() 사용 예제
자바스크립트에서는 웹페이지를 동적으로 만들기 위해 타이머 함수를 제공합니다. 타이머 함수는 일정 시간이 경과한 후에 특정한 작업을 수행하도록 지시할 수 있습니다. 이러한 기능을 구현하기 위해 setTimeout(), setInterval() 함수를 사용하시면 됩니다. 그럼 setTimeout(), setInterval() 함수를 사용하는 방법에 대해서 알아보겠습니다.
▼ 목차
- setTimeout() 함수
- setInterval() 함수
- clearTimeout() 함수와 clearInterval() 함수
1. setTimeout() 함수
setTimeout() 함수는 지정한 시간(밀리초 단위)이 지난 후에 콜백 함수를 실행합니다. 즉, 일정 시간이 지나면 “한 번“만 실행되고 이후에는 자동으로 해제됩니다.
1. 사용법
setTimeout(callback, delay, arg1, arg2, ...)
- callback: 실행할 콜백 함수입니다.
- delay: 콜백 함수를 실행하기까지 대기할 시간(밀리초)입니다.
- arg1, arg2, …: 콜백 함수에 전달할 인자입니다. 생략 가능합니다.
2. 사용 예제
<script>
// 예제1: 3초가 지난 후에 메시지를 콘솔에 출력
setTimeout(() => {
console.log("3초가 지났습니다.");
}, 3000);
// 예제2: 3초가 지난 후에 sum() 콜백 함수 호출
function sum(num1, num2) {
console.log(num1 + num2);
}
setTimeout(sum, 3000, 10, 20);
</script>
3. 결과 화면

2. setInterval() 함수
setInterval() 함수는 “일정 시간 간격“으로 반복적으로 콜백 함수를 실행합니다. 즉, 일정 시간이 지날 때마다 실행이 되고 해제하기 전까지 지속됩니다.
1. 사용법
setInterval(callback, delay, arg1, arg2, ...)
- callback: 실행할 콜백 함수입니다.
- delay: 콜백 함수를 실행하기까지 대기할 시간(밀리초)입니다.
- arg1, arg2, …: 콜백 함수에 전달할 인자입니다. 생략 가능합니다
2. 사용 예제
<script>
//예제1: 3초 간격으로 메시지를 콘솔에 출력
setInterval(() => {
console.log("3초마다 실행됩니다.");
}, 3000);
// 예제2: 3초 간격으로 sum() 콜백 함수 호출
function sum(num1, num2) {
console.log(num1 + num2);
}
setInterval(sum, 3000, 10, 20);
</script>
3. 결과 화면

3. clearTimeout() 함수와 clearInterval() 함수
setTimeout() 함수나 setInterval() 함수를 호출하면 타이머 ID를 반환합니다. 이 타이머 ID를 사용하여 타이머를 중지할 수 있습니다. 이때 사용하는 함수가 clearTimeout() 함수와 clearInterval() 함수입니다.
- clearTimeout() 함수: setTimeout() 함수를 이용하여 설정한 타이머를 해제하는 함수이며, clearTimeout() 함수를 호출할 때 clearTimeout() 함수에 전달된 타이머 식별자에 해당하는 타이머가 해제됩니다.
- clearInterval() 함수: setInterval() 함수를 이용하여 설정한 타이머를 해제하는 함수이며, clearInterval() 함수를 호출할 때 clearInterval() 함수에 전달된 타이머 식별자에 해당하는 타이머가 해제됩니다.
1. clearTimeout() 함수 사용 예제
<script>
// setTimeout() 함수로 설정한 타이머 해제하기
let timerId = setTimeout(() => {
console.log("타이머가 해제되어 콘솔에 찍히지 않습니다.");
}, 3000);
// 설정한 타이머를 해제하려면 clearTimeout() 함수에 타이머 식별자를 전달
clearTimeout(timerId);
</script>
2. clearInterval() 함수 사용 예제
<script>
// 예제2: setInterval() 함수로 설정한 타이머 해제하기
let intervalId = setInterval(() => {
console.log("타이머 실행");
}, 1000);
function stop() {
// 설정한 타이머를 해제하려면 clearInterval() 함수에 타이머 식별자를 전달
clearInterval(intervalId);
}
</script>
<button onclick="stop();">타이머 중지</button>
3. clearInterval() 함수 사용 예제 실행 결과 화면

☞ clearTimeout() 함수와 clearInterval() 함수를 이용하여 설정한 타이머를 해제하면 불필요한 메모리 사용을 방지할 수 있습니다.
자바스크립트 함수 관련 이전 게시물
- 자바스크립트 함수: 선언, 매개변수, 반환값, 스코프, 호이스팅
- 자바스크립트 이스케이프 문자와 템플릿 문자열 사용법과 예제
- 자바스크립트 URI 인코딩 처리: encodeURI(), encodeURIComponent() 함수
- 자바스크립트 메시지 박스: alert, confirm, prompt 사용법 및 예제
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!