[js] cancelAnimationFrame()

✅ cancelAnimationFrame()으로 취소하는 방법

📌 기본 사용법

js

 

const id = requestAnimationFrame(myCallback);

// 필요 시 취소
cancelAnimationFrame(id);

 

---

🧪 예시: 클릭하면 애니메이션 중단

js

let animationId;

function animate(timestamp) {
  // 애니메이션 처리
  console.log("Animating...");
  animationId = requestAnimationFrame(animate);
}

// 시작
animationId = requestAnimationFrame(animate);

// 3초 뒤 중단
setTimeout(() => {
  cancelAnimationFrame(animationId);
  console.log("애니메이션 중지됨");
}, 3000);

---

✅ 실무에서 쓰는 패턴 요약

📍 렌더링 이후 안전하게 실행

js

 

await this.render();
requestAnimationFrame(() => {
  this.initData(); // DOM 완성 후 실행됨
});

📍 애니메이션 루프 + 취소 가능

js

 

let frameId;

function loop() {
  // some update logic...
  frameId = requestAnimationFrame(loop);
}

// 시작
frameId = requestAnimationFrame(loop);

// 중단 시
cancelAnimationFrame(frameId);

 

---

✅ 요약 정리

함수	설명
requestAnimationFrame(cb)	브라우저가 다음 프레임 렌더링 전에 cb 실행
cancelAnimationFrame(id)	예약된 cb 실행을 취소
장점	렌더링 최적화, CPU 절약, 프레임에 맞춰 자연스러운 실행