210404 개발일지(118일차) - javascript 호출 스케줄링 (3) requestAnimationFrame

고재개발·2021년 4월 10일
0

Javascript Study

목록 보기
8/9

javascript 호출 스케줄링 관련 setTimeout과 setInterval, requestAnimationFrame에 대해 알아보자.

requestAnimationFrame

이름에서 알 수 있듯 그림을 그리는 등의 함수가 필요할 때 적합한 함수다.
재귀함수처럼 사용해야한다.

window.requestAnimationFrame(callback);

문법은 위와 같은데 앞의 두 함수와 달리 delay, 즉 시간에 대한 인자를 따로 넣어두지 않는다. 통상 초당 60회를 콜백하는데, 이는 display refresh rate에 따라 달라질 수 있다고 한다.
사용 예시는 아래와 같다.

function run() {
  // 작업하고자 하는 내용~~~
    window.requestAnimationFrame(run);
  }
}

window.requestAnimationFrame(run);

위와 같이 사용하면 된다.

cancleAnimationFrame()

재귀함수이다 보니, 한 번 호출하면 끊임없이 함수가 반복될 것이다.
이 때 멈춰주는 함수다.

장점

가장 큰 단점은, setInterval이나 setTimeout을 활용해서 특정시간마다 반복되는 함수를 실행시키고자 할 때와 비교하면 좋다.
requestAnimationFrame은 백그라운드 탭에서, 즉 사용자가 탭을 벗어나면 실행이 중단된다는 점이다. 이는 console.log를 통해 확인해보면 바로 알 수 있을 것이다.
이 장점때문에 사용하고자 했었는데.. 클라이언트 단이 아닌 서버 단에서 signal을 먼저 넘겨주는 프로젝트에서 사용하기가 쉽지 않아 포기하고 말았다ㅠ_ㅠ

profile
고재개발

0개의 댓글