지연실행, 반복실행, 애니메이션 프레임

Chapter 10 - setTimeout, setInterval and requestAnimationFrame

컴퓨터/IT학습

setTimeout and setInterval

// 지정한 시간동안 콜백 함수 실행을 지연한다.
const timeout = setTimeout(() => console.log('execute'), 1000); // 1초 후 실행

// 지정한 시간마다 콜백 함수 실행을 반복한다.
const interval = setInterval(() => console.log('execute'), 1000); // 1초 마다 실행

clearTimeout(timeout); // 중지
clearInterval(interval); // 중지

requestAnimationFrame

setInterval(() => { /* animate */ }, 1000/60); // 초당 60프레임

과거에는 애니메이션을 만들기 위해서 setInterval()을 활용했다. 위 예제처럼 초당 60프레임을 만들기 위해서 for문 같은 기계적 반복이 아닌 시간 단위로 반복할 수 있는 스케줄링이 가능해야 하기 때문이었다.

const animate = () => {
  // animate

  requestAnimationFrame(animate); // 함수는 꼭 재귀호출하여 반복될 수 있도록 구성해야한다.
}

const animationFrame = requestAnimationFrame(animate);

cancelAnimationFrame(animationFrame); // 중지

이 함수는 과거 방식을 사용하면서 야기되는 문제점들을 개선하는데 효과적이다. 애니메이션이 모니터 주사율이나 하드웨어의 성능, 브라우저 환경 등에 맞춰 최적화되기 때문에 더 부드럽게 작동할 수 있으며 비활성탭에서는 작동을 중지시켜 CPU 사용률을 최적화하고 냉각을 도우며 배터리 효율을 증가시킨다.

초판: 2024. 08. 16. 13:44:42