[JS] requestAnimationFrame

- requestAnimationFrame

• requestAnimationFrame 메서드는 브라우저가 repaint 전에 애니메이션을 업데이트하기 위해 지정된 함수를 호출하도록 요청
• repaint 전에 호출할 인수로 callback을 사용
• callback 횟수는 보통 초당 60회이지만 W3c 권장사항에 따라 대부분의 웹 브라우저에서 디스플레이 새로고침 빈도와 일치
• 성능과 배터리 수명을 개선하기 위해 백그라운드 탭이나 숨겨진 iframe에서 실행할 때 대부분의 브라우저에서 requestAnimationFrame 호출이 일시 중지된다.
• callback 메서드에는 현재 시간을 나타내는 DOMHighResTimeStamp 단일 인수가 전달된다.

 

window.requestAnimationFrame(callback);

Parameters

• callback
  • 다음 repaint를 위해 애니메이션을 업데이트해야 할 때 호출할 함수
  • callback 함수에는 requestAnimationFrame이 callback 함수를 실행하기 시작하는 시점을 나타내는 DOMHighResTimeStamp 단일 인수를 전달

 

Return Value

• callback 목록을 고유하게 식별하는 긴 정수 값(요청 ID)
• 이 값을 window.cancelAnimationFrame()에 전달하여 새로고침 callback 요청을 취소할 수 있다.

---

[ 참고자료 ]

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame