(JS) requestanimationframe() (2019/9/11)

개념

화면에서 움직임 또는 효과를 줄때 초당 60번 화면을 다시 그려서 끊김없이 부드럽게 나타내기 위함이다.

 

 

requestAnimationFrame 사용해서 콘솔 반복 찍기

requestAnimationFrame  사용해서 콘솔 반복 찍기

requestAnimationFrame  사용해서 콘솔 반복 찍기

requestAnimationFrame(testing);

먼저 실행시키고 싶은 함수를 requestAnimationFrame()에 넣는다. 자기 자신을 호출 시키기 위해서이다. requestAnimationFrame는 재귀함수와 비슷하다.

 

let counting = 0;

전역변수로 counting을 선언하고 값으로 0을 넣는다. 이후, testing함수에서 1씩 증가시킨다. 그렇게 되면 처음에는 0(counting) + 1(count++(1증가라는 뜻)) = 1(전역변수 counting에 저장) 두번째에는 1(1씩증가되어 저장된 전역변수 counting의 값) + 1(count++(1증가라는 뜻)) =2(전역변수 counting에 저장) 이렇게 된다.

 

function testing(){

    counting++

    if(counting > 40){

        return;

    }

    console.log(counting);

    requestAnimationFrame(testing);    

}

1씩 증가된 counting은 if문의 때문에 40까지만 1씩 더해진다. 여기서 if문의 실행문에 return만 있는건 counting이 40보다 커지면 return만 실행해서 반복적으로 자기 자신을 호출을 멈추고 빠져나간다는 뜻이다.

또한, testing함수 안에 requestAnimationFrame(testing) 을 넣어야지 재귀함수 처럼 자기자신을 호출을 한다.