클로저를 이용한 스톱워치

기존의 스톱워치 소스들이 Date를 이용한 부분이 많은데 그리되면 pause, resume 기능을 위한 처리로직이 지저분해 진다.

setInterval 함수가 일정 시간 간격으로 특정함수를 호출하는 형태이고

호출되는 특정함수는 호출되는 횟수를 시간으로 표현하면 간단히 처리될 수 있다.

여기서 작성된 timerFunc는 흔히 클로저로 검색시 볼 수 있는 정형적인 소스라 이해하는 데 큰 무리는 없을 것이다.

(해당 소스를 퍼가기 하실 때 원본 출처를 명시해 주세요. 에티켓입니다.)

// 시간 처리 포맷
const format = (val) => (val < 10)? '0' + val : val;

// 클로저 
const createTimer = (val) => {
  let time = val ||= 0;

  return () => {
    time++;

    let millisecond = format(time % 100);
    let second = format(Math.floor(time / 100) % 60);
    let minute = format(Math.floor(time / 6000));

    return minute + ' : ' + second + ' : ' + millisecond;
  }
}

const timer = createTimer();
// pause 테스트 용
// const timer = createTimer(123456);

// 10밀리 세컨드로 호출
const interval = setInterval(() => {
  let clock = timer();
  document.getElementById("app").innerHTML = `
<h1>${clock}</h1>
`;
}, 10);

// stop 처리시 사용
// clearInterval(interval);