[JavaScript] setTimeout과 setInterval 완전 정복 (비동기 타이머 사용법)

JavaScript에서 일정 시간 후에 코드를 실행하거나 반복적으로 실행하고 싶을 때, setTimeout()과 setInterval()은 가장 기본이자 강력한 함수입니다. 비동기 작업의 기초가 되는 이 타이머 함수들은 UI 제어, 애니메이션, 네트워크 폴링 등 다양한 실무에서 자주 사용됩니다. 이번 포스팅에서는 setTimeout, setInterval의 개념부터 문법, 실전 예제, 주의할 점까지 완벽하게 정리해보겠습니다.

setTimeout과 setInterval 완전 정복 (비동기 타이머 사용법)

---

1. setTimeout 기본 개념과 사용법

1. 정의

• 일정 시간이 지난 후, 딱 한 번 함수를 실행

2. 기본 문법

setTimeout(callback, delay)

• callback: 실행할 함수
• delay: 지연 시간(ms 단위, 1000 = 1초)

3. 사용 예제

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

실행 결과 (브라우저 콘솔)

3초 후 실행됨 (3초 뒤 출력)

4. 함수 분리 사용

function sayHi() {
  console.log("안녕하세요!");
}

setTimeout(sayHi, 2000);

---

2. setInterval 기본 개념과 사용법

1. 정의

• 일정 시간 간격으로 반복 실행되는 타이머 함수

2. 기본 문법

setInterval(callback, interval)

3. 사용 예제

setInterval(() => {
  console.log("1초마다 실행됨");
}, 1000);

실행 결과

1초마다 실행됨
1초마다 실행됨
...

4. 카운트 예제

let count = 0;
const timer = setInterval(() => {
  count++;
  console.log(count);
  if (count === 5) {
    clearInterval(timer);  // 타이머 종료
  }
}, 1000);

---

3. 타이머 제어: clearTimeout과 clearInterval

1. clearTimeout 사용

const timeoutId = setTimeout(() => {
  console.log("이 메시지는 출력되지 않음");
}, 5000);

clearTimeout(timeoutId);  // 타이머 취소

2. clearInterval 사용

let n = 1;
const intervalId = setInterval(() => {
  console.log(n++);
  if (n > 3) {
    clearInterval(intervalId);
  }
}, 1000);

3. 왜 중요할까?

• 타이머를 무한정 방치하면 성능 저하 또는 메모리 누수 발생 가능
• 이벤트 발생 시 타이머 정지 등 실시간 UI 제어에서 중요

---

4. 실전 예제: 디지털 시계 만들기

<div id="clock"></div>
<script>
  function updateClock() {
    const now = new Date();
    const time = now.toLocaleTimeString();
    document.getElementById("clock").textContent = time;
  }

  setInterval(updateClock, 1000);
</script>

실행 결과

• 웹 페이지에 현재 시간이 1초마다 업데이트됨

---

5. 주의할 점과 고급 팁

• setTimeout()은 실행 시간이 정확하지 않음 (딜레이 + 코드 처리 시간)
• setInterval()은 누적 지연 가능성 있음 → setTimeout 재귀로 대체 추천됨

재귀형 setTimeout 예제

function repeat() {
  console.log("반복 실행");
  setTimeout(repeat, 1000);
}
repeat();

---

6. 요약 및 마무리

이번 글에서는 JavaScript의 비동기 타이머 함수인 setTimeout()과 setInterval()에 대해 알아보았습니다. 특정 시간 후 한 번 실행하거나 반복 실행할 수 있는 이 함수들은 UI 구현, 서버 폴링, 애니메이션 등 다양한 용도에 활용됩니다. 타이머를 해제하기 위한 clearTimeout(), clearInterval()도 함께 익혀두어야 안전한 코드를 만들 수 있습니다. 디지털 시계나 카운터 같은 프로젝트로 직접 실습해보세요.

---

7. 관련 글 링크

• 관련 글: JavaScript의 비동기 처리 (Promise, async/await) 완벽 가이드
• 태그: #JavaScript #setTimeout #setInterval #비동기 #타이머 #코딩초보자