setTimeout vs setInterval

자바스크립트에서 시간과 관련된 대표적인 함수 중 대표적인 setTimeout과 setInterval에 대해서 알아보겠습니다.

 

1. setTimeOut / setInterval 특징

1. setTimeout
   - 일정 시간이 지난 뒤 코드를 실행한다.
   - 지연시간은 밀리세컨드 단위로 1000 => 1초를 의미한다.
   - 중지하려면 clearTimeOut() 함수를 사용한다.

const timeID = setTimeout(() => {
    console.log('test');
}, 5000); // 지연시간 5초

console.log(timeID); // 반환받은 값을 출력

위 코드는 5초뒤에 'test'를 출력하는 코드입니다.

아래에는 반환받은 값인 timeID를 출력합니다.

결과는 아래와 같습니다.

'test' 출력은 5초 뒤에 되게끔 했기 때문에 아래의 timeID가 출력된 뒤에 'test'가 출력됩니다.

 

2. setInterval

   - 일정 시간 동안 함수를 반복적으로 실행한다.

   - 중지하려면 clearInterval() 함수를 사용한다.

const timeID = setInterval(() => {
    console.log('test');
}, 5000); // 지연시간 5초

console.log(timeID); // 반환받은 값을 출력

위 코드는 5초마다 'test'를 출력하는 코드입니다.

결과는 아래와 같습니다.

 

2. setTimeOut vs setInterval

• 기본적인 사용 용도가 다르다
  setTimeOut : 일정 시간 뒤에 코드가 실행된다.
  setInterval : 일정 시간 동안 코드가 반복된다.
  
  
• 실제로 실행에 차이가 있다(중요!!)
  setTimeOut : 최초 실행 후에 지연 시간만큼 지난 후에 다시 함수를 호출하므로 앞서 실행 중인 코드로 인해 시간이 지연되더라도 이벤트가 중첩되거나 무시되지 않고 무조건 실행됨.
  setInterval : 앞서 실행 중인 코드의 완료 유무에 상관 없이 정해진 시간에 무조건 함수를 호출합니다.
  하지만, 앞선 코드들로 인해 실행할 수 없는 상태라면 이벤트가 무시될 수 있습니다.

최종 정리

정해진 시간에 코드가 실행되지 않아도 되지만 무조건 실행해야 한다고 한다면 => setTimeOut
정해진 시간에 무조건 코드가 실행되어야 하고 실행될 수 없는 상태에서는 무시되어도 된다면 => setInterval