자바스크립트를 사용하여 스톱워치, 타이머 기능의 함수를 만들어보려고 합니다. 아래에서 자세히 알아봅니다



# 자바스크립트로 타이머, 스톱워치 함수 만들기
먼저 이 기능은 언제 필요할까요? 간단하게 나열하면 다음과 같습니다.

- 함수를 호출시 너무 빠른 간격으로는 호출하지 않을 경우(Debounce 설정)
- 정해진 시간 뒤에 함수를 호출할 경우

그럼 전체 소스 코드를 먼저 살펴봅니다.

@ timer.js
startTimer = function(_time) {
  let _oriTime = _time;
  return function _timerFunc(_nextTime) {
    if (_oriTime === _time || _nextTime === -1) {
      _time = _time - 100 < 0 ? 0 : _time - 100;
      if (_time >= 100) {
        setTimeout(function() {
          _timerFunc(-1);
        }, 100);
        return _time + 100;
      }
      else {
        return 0;
      };
    }
    else {
      return _time;
    };
  };
};

타이머를 동작하려면 아래와 같이 사용합니다.
var timer = startTimer(10000); // 시간을 밀리세컨드 단위로 설정함

timer(); // 타이머가 시작됨

위 예제는 10초를 설정하였습니다. 이제 timer()를 실행하면 계속해서 남아있는 시간이 반환됩니다.



# 스톱워치 코드 자세히 알아보기
위 함수는 어떻게 작성되었는지 하나하나 구분하여 알아보겠습니다. 일단 구현 프로세스를 나열하면 아래와 같습니다.

- 클로저(Closure)로 Private 함수를 생성
- 설정된 시간을 _oriTime이라는 변수에 따로 저장함
- 시간을 100ms 계속 감소시킴(재귀함수를 호출, 자기 함수를 호출, self-invoking function)
- 이때 남은 시간이 100ms 이하가 될 때 까지 계속 


여기까지가 모든 과정의 끝입니다.


! 타이머가 종료시 특정 함수를 호출하게 하려면? 
만약 타이머가 끝나 자동으로 특정 함수를 호출한다면? 예를들어 closeAll()이라는 함수를 호출한다면 아래와 같이 수정해야 합니다.

@ 코드 12번 라인
else {
  return 0;
};

위 코드에서 0을 반환하기 전에 함수를 호출하면되겠죠.
else {
  closeAll(); // 마지막 종료전에 함수를 호출함
  return 0;
};

이제 타이머가 끝나면 closeAll()을 호출하게 됩니다.