[자바스크립트] 타이머 관련 메소드(setTimeout, clearTimeout, setInterval), 중첩 setTimeout

타이머 메소드, 중첩 setTimeout

• setTimeout, clearTimeout, setInterval에 기본 개념은 이전 포스팅에서 참고할 것

 

 

중첩 setTimeout

/** setInterval을 이용하지 않고 아래와 같이 중첩 setTimeout을 사용함
let timerId = setInterval(() => alert('째깍'), 2000);
*/

let timerId = setTimeout(function tick() {
  alert('째깍');
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

• 일정 간격을 두고 실행하는 방법에는 setInterval과 중첩 setTimeout이 있다.
• 중첩 setTimeout을 사용하면 호출을 원하는 방식으로 조정해 스케줄링할 수 있다.
• 예를 들면 서버 과부하 시 딜레이를 줘서 요청을 보내 데이터를 얻는 상황이 있다. 5초 간격으로 서버에 요청하는 것을 과부하 시 요청 시간을 2배로 늘리는 것!

 

let delay = 5000;

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

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

  timerId = setTimeout(request, delay);

}, delay);

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

 

 

중첩 setTimeout, setInterval 비교

setinterval 사용

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

• setInterval을 사용하면 func호출 사이의 지연 간격이 실제 명시한 간격(100ms) 보다 짧아진다.
• func을 실행하는 데 ‘소모되는’ 시간도 지연 간격에 포함시키기 때문이다.
• func 실행 시간이 명시한 간격보다 길어지면 함수 실행이 종료될 때까지 기다려주고 종료되면 바로 다음 호출을 시작한다.
• 따라서 함수 호출에 걸리는 시간이 매번 delay 밀리 초보다 길면, 모든 함수가 쉼 없이 계속 연속 호출된다.

 

중첩 setTimeout 사용

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

• 중첩 setTimeout을 사용하면 명시한 지연(여기서는 100ms)이 보장된다.
• 지연 간격이 보장되는 이유는 이전 함수의 실행이 종료된 이후에 다음 함수 호출에 대한 계획이 세워지기 때문이다.

 

 

대기 시간이 0인 setTimeout

• setTimeout(func, 0)이나 setTimeout(func)을 사용하면 setTimeout의 대기 시간을 0으로 설정할 수 있다.
• 대기 시간을 0으로 설정하면 func을 ‘가능한 한’ 빨리 실행할 수 있다.
• 대기 시간을 0으로 설정하면 func을 ‘가능한 한’ 빨리 실행할 수 있다.

setTimeout(() => alert("World"));

alert("Hello");

// Hello 출력 후 world 출력

 

 

📌 참고

• 모던 JavaScript 튜토리얼