setTimeout, setInterval and requestAnimationFrame

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열 번째인 setTimeout, setInterval and requestAnimationFrame 항목을 공부하면서 간단하게 작성한 글이다.

setTimeout

setTimeout은 특정 시간이 지난 후에 함수를 호출할 때 사용하는 Web API이다.

let timeoutID = setTimeout( foo1, 1000, arg1, arg2, ... );

첫 번째 인자로는 실행할 함수를 받고 두 번째 인자로는 몇 초가 지난 뒤 실행할지 millisecond로 받는다. 그래서 위 코드에서는 1000ms = 1초 후에 foo1이라는 함수를 호출하라는 의미가 된다. 그리고 setTimeout 함수는 양의 정수 값을 반환하는데 이것은 setTimeout이 생성한 타이머를 식별하는 데 사용한다. 

arg1부터는 호출될 함수에 보낼 parameter 값들이다.

clearTimeout

clearTimeout은 setTimeout으로 생성된 timeout 타이머를 취소시킨다.

clearTimeout( timeoutID );

setInterval

setInterval은 setTimeout과 비슷하지만 다른 점은 delay로 주어진 시간마다 반복해서 함수를 호출한다.

let intervalID = setInterval( foo1, 1000, arg1, arg2, ... );

clearInterval

clearInterval은 setInterval 으로 생성된 timeout 타이머를 취소시킨다.

clearInterval( intervalID );

requestAnimationFrame

이전에는 자바스크립트로 애니메이션을 만들 때 setInterval을 주로 사용했다. 부드러운 애니메이션을 만들기 위해서는 1초에 60 프레임 정도만 찍어내면 된다.

setInterval( animation , 1000/60 );

그러나 위에 방법처럼 하면 CPU나 그래픽카드가 느릴 때는 interval이 늦어질 수 있다. 그리고 setInterval은 정수 값을 인자로 받는데 1000/60은 정수가 나올 수가 없다. 그래서 간혹 가다 Frame skip이 발생할 수 도있다. 이러한 단점을 보완하기 위해 나온 것이 requestAnimationFrame이다. requestAnimationFrame은 인자값으로 호출할 함수만 받는다.

let animationFrameID = requestAnimationFrame( foo1 );

requestAnimationFrame의 장점은 다음과 같다.

 

• 백그라운도 동작 및 다른 탭으로 이동 시 중지된다. (성능 최적화)
• 1초에 60번 호출 또는 모니터의 주사율에 맞춰서 실행한다.
• 여러 개의 애니메이션을 만들 때도 각각의 타이머를 생성하지 않고 하나의 타이머를 사용한다.

그리고 requestAnimationFrame은 자기 자신을 반복 호출하지 않기 때문에, 재귀적으로 requestAnimationFrame을 호출해줘야 한다.

function animation(){
  //애니메이션 코드...
    
    
  requestAnimationFrame( animation );
}

requestAnimationFrame( animation );

cancelAnimationFrame

스케줄 된 requestAnimationFrame 요청을 취소한다.

cancelAnimationFrame( animationFrameID );