1초마다 함수를 실행을 시켜야 한다면
setInterval() 사용해도 큰 무리는 없다.
let countNum = 0;
setInterval(() => {
countNum += 1;
console.log(countNum);
}, 1000);
적당히(?) 잘 돌아가지만
더 정확하게 1초마다 함수를 실행시켜야 할 때가 있다.
예를 들면 60초짜리 게임의 카운트를 센다던가...
정확하게 딜레이 없이 딱 맞아야 하는 경우가 꽤 있을 텐데
setInterval은 딜레이가 생겨서 아래와 같이 해결했었다.
let prevTime = new Date().getTime();
let countNum = 60; //60초
function render() {
let ts = new Date().getTime();
if (ts >= prevTime + 1000) {
prevTime = new Date().getTime();
countNum -= 1;
console.log(countNum + "초 남았다!");
//여기서 함수 실행
}
requestAnimationFrame(render);
//반복 시켜줌
}
requestAnimationFrame(render);
requestAnimationFrame()
애니메이션 구현을 위한 최적화 API를 사용하여
1초에 60번(Frame) 실행시켜주고 prevTime 보다
현재 시간이 1초만큼 크거나 같으면 실행!
간단하게 구현해봤다.
See the Pen 정확한 1초 by KIHWAN CHUN (@yahao2512) on CodePen.
무엇보다 브라우저 탭 이동시 타이머가 멈추기 때문에
전력 소모도 덜 된다. 게임이라면 멈춰있겠지?
정확한 1초 구현을 위해서 requeastAnimationFrame()을
사용해 보시기를~
'사이드 프로젝트 > javascript 팁' 카테고리의 다른 글
| 브라우저, 윈도우 창 크기 구하기 [innerHeight outerHeight 차이 window.resize() 사용방법] (0) | 2024.04.29 |
|---|---|
| [javascript] 백분율 구하기, 프로그레스 바 구현 방법 (0) | 2024.04.25 |
| [javascript] 스크롤 원하는 위치로 부드럽게 이동 offsetTop scrollTo() behavior사용방법, scrollTop 이동 (0) | 2024.04.25 |