- 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() 를 사용하자.
'programming > javascript' 카테고리의 다른 글