setTimeout / 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프레임
위처럼 초당 60프레임 애니메이션을 만들기 위하여 이전에는 setInterval을 활용했다. 반복문을 사용하는 것보다는 느려야 하고 프레임이 매끄럽게 움직여야 했기 때문이다. requestAnimationFrame() 함수는 이런 코드에서 붉어져나오는 여러 문제점들을 개선하는데 효과적이다.
- 애니메이션이 더 부드럽게 작동
- 모니터 주사율, 하드웨어 성능 등 실행중인 브라우저에 맞추어 최적화
- 비활성탭에서의 작동 중지 ( CPU 사용률, 냉각 등 )
- 위 항목들에 따른 배터리 효율의 증가
const animate = () => {
// animate
requestAnimationFrame(animate); // 함수는 꼭 재귀호출하여 반복될 수 있도록 구성해야한다.
}
const animationFrame = requestAnimationFrame(animate);
cancelAnimationFrame(animationFrame); // 중지