requestAnimationFrame

c++ 개발자로서 requestAnimationFrame 함수는 볼때마다 새롭다.

마치 콜백 함수처럼 보이는데 콜백함수는 아니고,

그렇다면 재귀 함수인가? 하고 보면 또 그것도 아니다.

그런데 사용 예제들을 보자면 꼭 재귀 함수처럼 쓰인다. 다만 탈출 조건이 주어지지 않은 재귀 함수처럼 보여서 여간 신경이 쓰이는 것이 아니다.

예를 들면 이런 식이다.

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

위 예제에서 step 함수는 자신의 함수 정의 안에 requestAnimationFrame 함수를 호출한다. 그런데 이 requesetAnimationFrame 함수에 자기 자신을 파라미터로 넘겨주고 있다. 그러니 step 함수는 requesetAnimationFrame 를 호출하고 requesetAnimationFrame 는 step 함수를 호출하는 꼴이다.

서로 서로 끝없이 번갈아가며 호출하는 셈이니 끝이 없다.

그래서 Animation 이 된다.

물론 위의 예제에서는 progress 가 2000이 되는 순간 이 끝없는 호출의 고리가 끊어진다.

하지만 다른 많은 예제에서는 이런 멈춤/ 혹은 탈출 조건이 빠져있다.

그래서 이런 식의 호출을 실제 업무에서 단 한번도 써보지 않은 사람으로써 이런 코드를 볼때마다 늘 찜찜하다.

three.js 에서는 이런 식으로 서로 서로가 호출하는 함수가 흔한가?

three.js 를 공부하면서 javascript 도 같이 공부해 나가는 중인데..

C++ 과는 참 다른점이 많은것 같다.

마치 지구인과 화성인이 만나는 느낌이다.