Interactive - requertAnimationFrame

1. requertAnimationFrame

브라우저가 제공하는 타이머 기반의 API로
애니메이션 및 그래픽을 부드럽게 처리 할 수 있습니다.

일반적으로 매초 60번의 호출로 애니메이션을 업데이트하는 데 사용됩니다.

let number = 1;

function render() {
  console.log((number += 1));
	//초다 60번 실행됨
  requestAnimationFrame(render);
}

render();

2. 취소하기

let animationId;

const animate = () => {
  // 애니메이션 처리 로직
  animationId = requestAnimationFrame(animate);
};

// 애니메이션 프레임 시작
animate();

// 애니메이션 프레임 취소
cancelAnimationFrame(animationId);