javascript 호출 스케줄링 관련 setTimeout과 setInterval, requestAnimationFrame에 대해 알아보자.
이름에서 알 수 있듯 그림을 그리는 등의 함수가 필요할 때 적합한 함수다.
재귀함수처럼 사용해야한다.
window.requestAnimationFrame(callback);
문법은 위와 같은데 앞의 두 함수와 달리 delay, 즉 시간에 대한 인자를 따로 넣어두지 않는다. 통상 초당 60회를 콜백하는데, 이는 display refresh rate에 따라 달라질 수 있다고 한다.
사용 예시는 아래와 같다.function run() { // 작업하고자 하는 내용~~~ window.requestAnimationFrame(run); } } window.requestAnimationFrame(run);
위와 같이 사용하면 된다.
재귀함수이다 보니, 한 번 호출하면 끊임없이 함수가 반복될 것이다.
이 때 멈춰주는 함수다.
가장 큰 단점은, setInterval이나 setTimeout을 활용해서 특정시간마다 반복되는 함수를 실행시키고자 할 때와 비교하면 좋다.
requestAnimationFrame은 백그라운드 탭에서, 즉 사용자가 탭을 벗어나면 실행이 중단된다는 점이다. 이는 console.log를 통해 확인해보면 바로 알 수 있을 것이다.
이 장점때문에 사용하고자 했었는데.. 클라이언트 단이 아닌 서버 단에서 signal을 먼저 넘겨주는 프로젝트에서 사용하기가 쉽지 않아 포기하고 말았다ㅠ_ㅠ