setInterval로 타이머 만들기

 setInterval 1초당 타이머의 1초가 증가하게 만들었는데 타이머가 오작동한다는 문의가 들어왔다. 내 컴퓨터에선 항상 잘 작동하는데 신기할 노릇이다. 결론부터 말하자면 setInterval 1000ms는 1000ms가 아니라는 것. updateStopwatch메서드가 동작할 때마다 현재시간과 시작시간의 차이를 계산하여 해결했다. 시간을 200ms로 한 이유는 너무 짧으면 컴퓨터에 부하가 걸리게 되고 길면 빠트리는 초가 발생했기 때문이다. 100ms부터 50ms씩 늘려 시간을 빠트리지 않는 시간이 200ms였다.

 

 평소에 getTime()을 이용해 시간을 구했었는데 valueOf()도 똑같이 동작하는걸 확인했다.

 

// stopwatch 시작
function startStopwatch() {
    stopwatchInterval = setInterval(updateStopwatch, 200);
}

// stopwatch 시간 업데이트
function updateStopwatch() {
    clientCurrentTime = new Date();
    elapsedTime = clientCurrentTime.valueOf() - clientStartTime.valueOf();

    if(elapsedTimeDisplay !== millisecondsToTime(elapsedTime)) {
        elapsedTimeDisplay = millisecondsToTime(elapsedTime);
        updateStopwatchDisplay($stopwatchRecord, elapsedTimeDisplay);
    } else {
        elapsedTimeDisplay = millisecondsToTime(elapsedTime);
    }
}

 

디자인도 생각보다 잘 나온거 같아서 만족

 

 평소에 코딩애플 유튜브를 자주보는데 이 이슈가 발생한지 얼마 지나지 않아 관련 영상이 올라와서 복습하는 느낌으로 재밌게 봤다.