setInterval, setTimeout, requestAnimationFrame

[hochan222]

setInterval, setTimeout, requestAnimationFrame 의 차이점은?

• https://alstn2468.github.io/Javascript/2020-06-29-setTimeout_setInterval_requestAnimationFrame/
• https://ko.javascript.info/settimeout-setinterval
• https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

[hochan222]

setInterval, setTimeout

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 한다.

• setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
• setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

자바스크립트 명세서엔 setTimeout과 setInterval가 명시되어있지 않다. 타이머 함수는 자바스크립트의 스펙이 아닌 브라우저와 node.js에서 제공한다.

• setTimeout 은 최소 지연 간격을 보장하지만 setInterval은 최소 지연 간격을 보장하지 않는다.
• setInterval은 주기적인 작업을 하는데 그 작업이 시간보다 오래 걸릴 경우 콜백이 지연되고 사라질 수 있다.

requestAnimationFrame

자바스크립트에서 애니메이션을 구현하기 위한 방법으로는 new Date()를 사용한 타이머를 이용한다. 시작 시점과 종료 시점을 변수에 저장해 반복으로 실행하는 방법이다. 이러한 방법은 호출 스택이 지나치게 많다는 단점이 존재한다.

이러한 경우 requestAnimationFrame()함수로 부하를 줄일 수 있다.

• 백그라운드 동작 및 비활성화시 중지(성능 최적화)
• 최대 1ms(1/1000s)로 제한되며 1초에 60번 동작
• 다수의 애니메이션에도 각각 타이머 값을 생성 및 참조하지 않고 내부의 동일한 타이머 참조

https://simsimjae.tistory.com/402

[yechoi42]

requestAnimationFrame

기본 사용방법은 재귀함수의 흐름과 같습니다.
한번 실행한 함수 안에서 자신을 불러 실행합니다.

다른 점은 단순 재귀함수는 시간 관계없이 그냥 무한적으로 재실행만 주구장창 합니다.
하지만 RAF 는 프레임이라는 개념이 들어갑니다. 프레임은 1초당 화면을 그려주는 단위를 말합니다. 단위 fps ( 주사율 )
ex) 60fps = 1초당 60 번 화면을 그립니다.

재귀함수 flow =  ||||||||||||||||||||||||||||||||||||||||||||

RAF flow        =  |||   |||  |||  |||  |||  |||  |||  |||  |||

​
여러가지 동작을 같이한다고 한다면 재귀함수의 경우 '먹통' 현상이 일어납니다.
예를 들면 리스트를 100000개를 그리는 것과 동시에, input 에 글자를 작성한다고 하면 input 에는 글자를 0.5 초정도 작성이 안되다가
갑자기 타이핑이 될겁니다.
​

하지만 raf 를 사용하면 그리는 것과 동시에 input 에 타이밍이 곧잘 입력될겁니다.
이게 가장 큰 차이점이며, 최적화 과정에 일부분이 되겠습니다.

코드 예시

<div id='value'>0</div>

// script
var start = 0;

(function () {
    window.addEventListener("load", function () {
        var raf = null;
        var value = document.querySelector("#value");
   
        function animate (time) {
            start++; // 값 증가
            value.innerHTML = start; // 다시 그린다.
            
            if (start < 300) { // start 가 300 보다 작을 때 
                raf = requestAnimationFrame(animate); // animate 재귀 실행
            } else {
                cancelAnimationFrame(raf) // requestAnimationFrame 을 정지시킨다.
            }
        }

        animate(); // animate 최초 실행
    })
})

https://codepen.io/demnodey/pen/vYEmKOe

출처: https://codepen.io/demnodey/pen/vYEmKOe