모던 자바스크립트 (함수) 4-4. setTiemout과 setInterval을 이용한 호출 스케줄링

호출 스케줄링 (scheduling a call)

: 일정 시간이 지난 후에 원하는 함수를 예약 실행 할 수 있는 기능

 

 

 

setTimeout

: 일정 시간이 지난 후에 함수를 실행하게 하는 메서드

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

- func | code

: 실행하고자 하는 코드

: 함수 또는 문자열

 

- delay

: 실행전 대기 시간으로, 단위는 밀리초. 기본 값은 0

 

- args...

: 함수에 전달할 인수

: IE9 이하에서는 지원하지 않는 기능

function sayHi(who, phrase) {
  alert( who + ' 님, ' + phrase );
}

setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요.

setTimeout(() => alert('안녕하세요.'), 1000);

: 함수를 넘길 때 함수 뒤에 ()을 붙이지 않도록 주의

 

 

※ clearTimeout

: 스케줄링 취소 메서드

: setTimeout 호출 후 반환된 타이머 식별자를 이용하여 취소

let timerId = setTimeout(() => alert("아무런 일도 일어나지 않습니다."), 1000);
alert(timerId); // 타이머 식별자

clearTimeout(timerId);
alert(timerId); // 위 타이머 식별자와 동일함 (취소 후에도 식별자의 값은 null이 되지 않습니다.)

 

 

 

 

setInterval

: 함수를 주기적으로 실행하기 위한 메서드

: setTimeout과 동일한 문법

: 중단하기 위해서는 clearInterval(timerId)를 통해 중단

// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);

// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);

 

 

 

중첩 setTimeout

: setInterval과 같이 일정 간격을 두고 함수를 실행하기 위한 방법

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

: 호출 결과에 따라 다음 호출을 원하는 방식으로 조정해 스케줄링이 가능하기 때문

let delay = 5000;

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

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

  timerId = setTimeout(request, delay);

}, delay);

 

: CPU의 소모가 많은 작업을 주기적으로 실행할 때에도 이와 같이 setTimeout을 재귀 실행하는 방법이 유용

: setInterval과 달리 지연간격을 보장

 

 

 

 

 

setInterval과 setTimeout의 비교

- setInterval

: setInterval의 경우 func를 실행하는데 걸리는 시간도 지연 간격에 포함시키기 때문에

 호출사이의 간격이 좁아 질 수 있음

: func를 실행하는데 소모되는 시간이 명시한 지연 시간보다 긴 경우,

  엔진이 func의 실행이 종료될 때 까지 기다리고, func의 실행이 종료되면 다음 호출을 시작

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

 

- setTimeout

: 명시한 지연 시간이 보장

: 이전 함수의 실행이 종료된 이후에 다음 호출에 대한 계획이 세워지기 때문

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

 

 

※ setInterval과 setTimeout에 대한 참조정보는 가비지 컬렉션의 대상이 아님

setInterval의 경우 clearInterval이 호출되기 전까지 함수에 대한 참조가 메모리에 유지됨

 

 

 

 

Refference

setTimeout과 setInterval을 이용한 호출 스케줄링