[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame

- setTimeout : 자바스크립트 개념에서 온 것이 아니고, 브라우저 그리고 nodeJS 개념에서 왔다.

=> 일정 시간이 지난 후에 기능을 메시지큐에 넣어주고 스택이 비게되면 자바스크립트가 실행한다.

일정 시간 후 바로 실행 될 수도 있고 콜스택에 함수가 많으면 천천히 실행 될 수도 있다.

setTimeout(function(name) { }, 3000, param1);

> 세번째 파라미터 부터는 콜백 함수의 인자값을 의미한다

// 이 경우 콜백함수를 setTimeout에 주는것이 아니라 자바스크립트가 직접 실행 하게 되므로 비추!!

// 해서 2번처럼 해야한다. > 첫번째 매개변수에 함수명만 입력

1. setTimeout(console.log("Hello"), 10000);

// 함수를 실행하지말고, 함수의 이름을 넣도록. 그러면 자바스크립트가 아닌 브라우저에서 실행이 될 것 이다.

2. setTimeout(console.log, 10000, "Hello");

// 함수를 취소 하고 싶은 경우 -> 이것을 변수로 저장해서 clear 를 사용하면 된다.

const helloT = setTimeout(console.log("Hello"), 10000);

console.log(helloT); // 실행시 setTimeout 의 ID가 뜬다.

clearTimeout(helloT); // 생성된 setTimeout 의 ID를 정리해준다.

- setInterval : 정해진 시간마다 함수를 호출한다.

인터벌이 1초보다 적다면 크롬에서는 시간을 1초로 맞춰버린다.

즉, 적용할 수 있는 최소 시간은 1초이다. (1초 이하의 시간은 의미없음. 무시됨)

취소는 setTimeout 처럼 하되 clearInterval() 하면된다.

- requestAnimationFrame(callback)

이전에 스크립에서 뭔가 움직이게하려면 사람들은 setInterval 을 사용했다.

하지만 setInterval 에 명시한 시간이 정확하지 않으므로 마냥 의지할 수 없었다.

(또한, CPU, 그래픽카드가 느리면 인터벌이 느려질 수 있음)

그래서 나온 것이 requestAnimationFrame 이다.

이 것은 브라우저가 다시 칠해지기 전에(= 이미지가 렌더링 되기 전에) 함수를 실행한다.

브라우저가 업데이트 할때마다 requestAnimationFrame 를 요청하고 애니메이션을 수정할 수 있다.

매개변수에 시간이 없는데 콜백함수를 호출하는 시기는 브라우저 자체에서 결정하기 때문에 원하는 시간으로 조정하고 싶은경우 따로 구현해야한다.

const sayHi = () => {

console.log("Hi");

requestAnimationFrame(sayHi);

}

requestAnimationFrame(sayHi);

프레임 요청을 취소하고 싶은 경우 => cancelAnimationFrame(requestID);

# requestAnimationFrame() 의 장점

setTimeout(), setInterval()은 보이지 않은 곳에서도 수행되지만, requestAnimationFrame()는 현재 창에 표시 되지 않으면 애니메이션을 중지하여 배터리 수명과 성능향상에 도움이 됩니다

그래픽 카드로 구동됨!!!!!!!

1초에 60프레임 호출

뭔가 빠르게 실행시켜야 하는 로직이 필요하다면 requestAnimationFrame() 를 사용하자.

티스토리툴바