JavaScript setTimeout vs setInterval 차이점과 실무에서의 활용 예제

 

 

오늘은 자바스크립트(JavaScript)를 활용한 시간 제어 함수인

setTimeout과 setInterval에 대해 자세히 알아보겠습니다.

이 두 함수는 웹 개발 실무에서 매우 자주 사용되며,

타이머 관련 기능을 구현할 때 유용하게 활용됩니다.

---

✅ 1. setTimeout이란?

setTimeout은 일정 시간이 지난 후에 단 한 번 특정 작업을 실행하도록 예약하는 함수입니다.

 

setTimeout(() => {
  console.log('3초 후에 실행됩니다!');
}, 3000);

 

📌 위 코드는 3초(3000ms) 후에 콘솔에 메시지를 출력합니다.

---

✅ 2. setInterval이란?

setInterval은 일정 시간 간격으로 계속 반복해서 특정 작업을 실행하도록 예약하는 함수입니다.

 

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

 

📌 위 코드는 2초마다 계속해서 콘솔에 메시지를 출력합니다.

---

✅ 3. 실무 활용 예제

💡 setTimeout 실무 예: 로그인 실패 후 일정 시간 후에 다시 로그인 시도 안내
💡 setInterval 실무 예: 실시간 시계, 실시간 데이터 폴링

---

⚠️ 주의할 점

• setInterval은 작업 시간이 길어지면 중첩 실행이 발생할 수 있어 주의해야 합니다.
• setTimeout을 재귀적으로 호출하면 setInterval처럼 주기적인 동작도 구현할 수 있습니다.

 

function repeat() {
  console.log('2초마다 실행되지만 정확한 간격으로 실행됨');
  setTimeout(repeat, 2000);
}
repeat();

 

이 방식은 작업이 끝난 후 다음 실행을 예약하기 때문에 더 안정적인 간격 유지가 가능합니다.

---

✅ 어떤 걸 언제 써야 할까?

상황	추천 함수
단일 지연 실행	setTimeout
반복 작업 (정확도보다 반복 중요)	setInterval
반복 작업 (정확한 간격 필요)	setTimeout + 재귀