JavaScript - 호출 스케줄링(setTimeout, setInterval, requestAnimationFrame)

 

지정한 시간에 함수가 실행될 수 있도록 해주는 '호출 스케줄링' 구현 방법에 대해 알아보자.

 

setTimeout

setTimeout을 사용하면 지정한 시간이 지난 후에 함수가 실행되도록 할 수 있다.

 

사용방법

let timerId = setTimeout(func, delay, arg1, arg2, ...)

btn.addEventListener('click', () => clearTimeout(timerId));

func - 호출하고 싶은 함수를 넣는다.

delay - 지연시키고 싶은 시간을 넣는다. 단위는 ms(밀리세컨드) 이므로 1000을 넣으면 1초 후 실행된다. 기본값은 0이다.

arg - 호출하려는 함수의 인자를 전달할 수도 있다.

timerId - setTimeout은 식별자를 반환한다. 브라우저 환경에서는 타이머 식별자의 값이 1과 같은 숫자형이다.

clearTimeout - 타이머식별자로 해당 스케줄링을 취소한다.

 

 

setInterval

setInterval을 사용하면 지정한 주기마다 반복해서 함수가 실행될 수 있도록 할 수 있다.

 

사용방법

let timerId = setInterval(func, delay, arg1, arg2, ...)

btn.addEventListener('click', () => clearInterval(timerId));

func - 호출하고 싶은 함수를 넣는다.

delay - 실행 주기를 넣는다. 단위는 ms(밀리세컨드) 이므로 1000/60을 넣으면 1초에 60번 실행된다. 기본값은 0이다.

arg - 호출하려는 함수의 인자를 전달할 수도 있다.

timerId - setInterval은 식별자를 반환한다.

clearInterval - 타이머식별자로 해당 스케줄링을 취소한다.

 

 

 

setTimeout, setInterval 모두 가비지 컬렉션의 대상이 아니라 스케줄링할 필요가 없어진 함수는 아무리 작더라도 직접 취소해주는 것이 좋다. 

 

setTimeout와 달리 setInterval에서는 함수 호출 사이의 지연간격이 지정한 시간보다 짧아진다. 반대로 CPU가 과부하 상태이거나, 브라우저 탭이 백그라운드 모드이거나, 노트북이 배터리에 의존해서 구동 중인 경우 브라우저 내 타이머가 느려지면서 지연 간격이 지정한 시간보다 길어진다. 이런 상황에서 타이머는 300ms~1000ms까지 지연되기도 한다.

setTimeout 함수호출                                                                                      setInterval 함수호출

 

 

requestAnimationFrame

requestAnimationFrame은 setInterval()의 단점을 개선한 함수이다. 초당 60번 호출해주는데 상황에 따라 조금 느려질 수는 있다.

 

사용방법

let timerId
const func = () => {
  if (condition) {
    return;
  }
  tiemId = requestAnimationFrame(func);
}
func();

btn.addEventListener('click', () => cancelAnimationFrame(timerId));

func - 호출하고 싶은 함수안에 requestAnimationFrame을 를 넣는다.

timerId - requestAnimationFrame은 식별자를 반환한다.

cancelAnimationFrame - 타이머식별자로 해당 스케줄링을 취소한다. 또는 위의 코드와 같이 함수호출 직전에 조건문을 넣어주어서 정지시킬 수도 있다.

 

 

참고자료

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

 

[JS] async/await으로 콜백지옥을 해결해보자

 

Combination of async function + await + setTimeout