[Javascript] requestAnimationFrame과 setInterval의 차이

setInterval과 requestAnimationFrame의 차이

두 메서드보다 자바스크립트 내에서 반복 작업을 실행할 때 사용되는 주요 메서드입니다. 그러나 둘은 동작 방식, 성능, 사용 목적이 다릅니다.

setInterval

• 지정된 시간 간격마다 콜백 함수를 반복 실행하는 메서드
• 고정된 간격: 일정한 시간 간격마다 콜백 함수 실행
• 타이머 지연: 브라우저가 많은 작업을 처리하고 있을 때 타이머가 딜레이 될 수도 있다
• CPU 사용: 브라우저가 바쁘거나 해당 브라우저 탭을 비활성화 하더라도 계속 작동
• 사용 용도: 주기적으로 특정 작업 실행 (서버 폴링, 시계 업데이트) 주로 데이터 처리 & 작업에 용이함

setInterval(() => {
  console.log("1초마다 실행");
}, 1000);

requestAnimationFrame

• 브라우저의 화면 재생 빈도(프레임)에 맞춰서 콜백 함수를 실행
• 화면 새로 고침에 동기화: 브라우저의 리플로우와 리페인트 주기에 맞춰 콜백을 실행, 애니메이션이 더 부드럽고 효율적
• 고정되지 않은 간격: 브라우저의 디스플레이 주사율에 따라 달라짐(일반적으로 60FPS, 16.66.ms 간격)
• 자동 일시정지: 탭이 비활성화 또는 브라우저가 숨겨져 있을 때 자동으로 애니메이션이 중단되어 CPU와 메모리 리소스 절약 가능
• 보다 정확한 타이밍: 브라우저의 화면 새로 고침 타이밍에 맞춰 실행되므로 애니메이션 작업에서 더 매끄러움
• 사용 용도: 웹 애니메이션, 캔버스 애니메이션, 스크롤 효과 (주로 애니메이션 관련하여 사용함)

보통 사람의 눈은 1초에 60번 장면이 넘어가야 부드럽다고 느낀다고 한다.

function animate() {
  console.log("프레임마다 실행");

  requestAnimationFrame(animate); // 함수 내부에서 재호출
}

requestAnimaitonFrame(animate);

특정 조건에 따라 함수를 중단하고 싶을 때

let raf;

function animate() {
  if (조건) {
    return cancelAnimationFrame(raf);
  }

  raf = requestAnimationFrame(animate);
}

requestAnimaitonFrame(animate);

주요 차이점

특성	setInterval	requestAnimationFrame
타이밍	고정된 시간	브라우저의 프레임 속도에 맞춰 실행
목적	주기적인 작업, 타이머	애니메이션에 최적화
리소스 관리	탭이 비활성화 되어도 실행	탭이 비활성화되면 일시 중단
정확성	시스템 부하에 따라 지연 발생 가능	브라우저 프레임에 맞춰 일정한 간격 유지
사용 사례	서버 폴링, 타이머	애니메이션, UI 렌더링