스톱워치를 구현할 때, setIntervel을 사용하면 안 된다

자바스크립트로 스톱워치를 구현할 때, setIntervel을 사용하면 안 된다.

setIntervel은 일정한 시간 간격마다 동일한 콜백을 실행하는 함수이다.
단순하게 생각하면 스톱워치를 구현할때, 1초마다 초를 늘리는 콜백을 실행시키면 된다고 생각한다.

하지만, setIntervel의 일정한 시간 간격은 콜백의 실행 시간을 고려하지 않은 시간 간격이다.

예를 들자면,
만약 시간 간격이 4ms이고, 콜백 실행 시간이 1ms 라면
밑과 같이, 두번의 콜백 실행에 걸리는 시간이 8ms가 아닌 10ms가 걸릴것이다.

| 4ms | 1ms | 4ms | 1ms | ... 

따라서 스톱워치처럼 시간의 간격이 매우 중요한것이라면 setIntervel을 사용하면 정확한 측정이 어렵다.

그렇다면 어떻게 스톱워치를 구현할 수 있을까?
해답은 Date객체이다.

Date 객체는 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것인데,
스톱워치 시작 date와 현재 시각 date 객체의 차를 통해 스톱워치의 시:분:초를 정확하게 구할 수 있다.