setInterval과 중첩 setTimeout

일정 간격을 두고 실행하는 방법에는 setInterval과 중첩 setTimeout이 있다.

setInterval

let timerId = setInterval(() => console.log('째깍'), 2000);

2초마다 console.log('째깍') 를 실행한다.

코드가 비교적 단순하다.

중첩 setTimeout

let timerId = setTimeout(function tick() {
  console.log('째깍')
  timerId = setTimeout(tick, 2000);
}, 2000);

setInterval과 마찬가지로 2초마다 console.log('째깍') 를 실행한다. 그러나, setInterval과의 작은 차이가 존재한다.

중첩 setTimeout을 이용하는 방법은 지연 간격을 보장하지만 setInterval은 이를 보장하지 않는다.

setInterval

let i = 1;
setInterval(function() {
  func(i++);
}, 100);

함수를 실행하는 시간도 지연 간격에 포함시킨다.

함수 실행 시간이 지연 간격보다 길 때는 함수 실행을 마칠 때까지 기다린다.

→ 지연 간격을 일정하게 보장하지 못한다.

중첩 setTimeout

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);

함수를 실행하는 시간이 지연 간격에 포함되지 않는다.

함수 실행을 마친 후에 다음 함수 호출에 대한 계획을 세운다.

→ 지연 간격을 일정하게 보장한다.

setInterval을 사용하는 방법보다 유연하다.

중첩 setTimeout은 지연 간격을 다음 예시처럼 유연하게 조정할 수 있다.

let delay = 5000;

let timerId = setTimeout(function request() {
  ...요청 보내기...

  if (서버 과부하로 인한 요청 실패) {
    // 요청 간격을 늘립니다.
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);

결론

• 정해진 주기적 작업을 간편하게 처리하려면 setInterval을 사용

• 작업이 완료된 후에만 다음 작업을 실행하거나, 유연한 실행 간격이 필요할 경우에는 중첩 setTimeout을 사용