[javascript] 정확한 1초 구하기. 정확한 타이머 만들기, requestAnimationFrame 사용 방법

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()을

사용해 보시기를~