requestAnimationFrame 활용

• setTimeout이나 setInterval을 사용한 연속적인 함수 호출은 약간의 delay가 발생하는 문제가 있다.
• 그 대안으로 requestAnimationFrame 메서드가 있다.

var count = 0;
var el=document.querySelector(".outside");
el.style.left = "0px";

function run() {
   if(count > 70) return;
   count = count + 1;
   el.style.left =  parseInt(el.style.left) + count + "px";
   requestAnimationFrame(run);
}

requestAnimationFrame(run); // 실행결과 outside 클래스의 태그가 이동한다. 

• 재귀호출 방식이며, 특정 조건이 될 때까지(함수의 탈출 조건) 함수가 실행된다.