JavaScript setTimeout()과 setInterval() 정리

JavaScript setTimeout()과 setInterval() 정리

setTimeout()과 setInterval()은 JavaScript에서 시간 지연이나 주기적인 실행을 제어할 때 사용하는 함수입니다.
두 함수 모두 비동기 함수로, 지정된 시간이 지난 뒤에 특정 코드를 실행하도록 예약합니다.

setTimeout() - 일정 시간 후 한 번 실행

setTimeout()은 일정 시간이 지난 후 한 번만 실행되는 타이머 함수입니다.

기본 문법

setTimeout(함수, 지연시간(ms));

• 함수: 지정된 시간이 지나면 실행할 코드 또는 함수
• 지연시간(ms): 실행까지 대기할 시간(밀리초 단위, 1000ms = 1초)

예제 1: 2초 후 실행

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

출력 결과 (2초 후)

2초 후 실행됩니다.

예제 2: 함수 따로 정의하기

function sayHello() {
  console.log('안녕하세요!');
}

setTimeout(sayHello, 1000);

출력 결과 (1초 후)

안녕하세요!

예제 3: 타이머 취소하기

clearTimeout()을 사용하면 예약된 setTimeout() 실행을 취소할 수 있습니다.

const timer = setTimeout(() => {
  console.log('이 메시지는 표시되지 않습니다.');
}, 3000);

clearTimeout(timer);

위 코드에서는 clearTimeout()으로 인해 함수가 실행되지 않습니다.

setInterval() - 일정 시간마다 반복 실행

setInterval()은 일정 시간 간격으로 반복 실행하는 타이머 함수입니다.
clearInterval()로 멈출 수 있습니다.

기본 문법

setInterval(함수, 간격(ms));

• 함수: 반복해서 실행할 코드 또는 함수
• 간격(ms): 반복 실행 간격(밀리초 단위)

예제 1: 1초마다 실행

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

출력 결과

1초마다 실행됩니다.
1초마다 실행됩니다.
1초마다 실행됩니다.
...

예제 2: 일정 횟수 후 멈추기

let count = 0;

const interval = setInterval(() => {
  count++;
  console.log(`${count}초 경과`);

  if (count === 5) {
    clearInterval(interval);
    console.log('타이머 종료');
  }
}, 1000);

출력 결과

1초 경과
2초 경과
3초 경과
4초 경과
5초 경과
타이머 종료

setTimeout() vs setInterval() 비교

구분                               setTimeout                                                          setInterval

실행 횟수	한 번만 실행	일정 간격으로 반복
취소 방법	clearTimeout()	clearInterval()
주요 사용 예시	지연 실행, 애니메이션 시작 지연	반복 작업, 주기적 데이터 업데이트

함께 사용하는 예시

setTimeout()과 setInterval()을 함께 사용하여 지연 후 반복 실행도 가능합니다.

setTimeout(() => {
  const interval = setInterval(() => {
    console.log('3초 후부터 2초마다 실행됩니다.');
  }, 2000);
}, 3000);

출력 결과 (3초 후부터)

3초 후부터 2초마다 실행됩니다.
3초 후부터 2초마다 실행됩니다.
...

요약

함수                                                              설명                                                                     취소 함수

setTimeout(fn, delay)	일정 시간 후 한 번만 실행	clearTimeout()
setInterval(fn, delay)	일정 시간마다 반복 실행	clearInterval()

결론

• setTimeout()은 한 번만 실행,
  setInterval()은 주기적으로 반복 실행할 때 사용합니다.
• 두 함수 모두 비동기적으로 작동하므로, 코드가 순차적으로 실행되지 않을 수 있다는 점을 주의해야 합니다.
• 반복 실행을 중단할 필요가 있을 때는 **clearTimeout() 또는 clearInterval()**을 반드시 사용해야 합니다.