Javascript 간단 타이머

개발을 하면서 타이머를 만들어야 할 경우가 있다.

이번에는 휴대폰 인증을 진행하면서 인증번호를 입력하는 최대시간에 대한 타이머가 필요했는데 물론 라이브러리들을 찾으려면 찾을 수 있겠지만 매우 간단하므로 직접 만들어보기로 했다.

폼 엘리먼트인 INPUT 필드에 남은 시간을 표시해주고 매 초당 감소되는 형태이다.

코드는 아래와 같다.

<input type="text" id="remain_time" value="">
<button onclick="startCountdown();">Start Countdown</button>
<button onclick="stopCountdown();">Stop Countdown</button>

<script>
var countdownTimer;
var countdownTime;

function startCountdown(){
  if(countdownTimer) clearInterval(countdownTimer);
  countdownTime = 300;
  countdownTimer = setInterval(function(){
    if(countdownTime>0){
      var ct = new Date(null);
      ct.setSeconds(countdownTime);
      var rt = ct.toISOString().substr(14, 5);
      document.getElementById('remain_time').value=rt;
      countdownTime -= 1;
    }else {
      clearInterval(countdownTimer);
      alert('Time end')
    }
  },1000);
}

function stopCountdown(){
  clearInterval(countdownTimer);
  document.getElementById('remain_time').value='';
}
</script>

뭐 워낙에 간단한 코드라서 그닥 설명이 필요하지도 않지만 설명을 해보자면 가장 중요한것은 clearInterval이다.

setInterval을 countdownTimer에 할당해서 사용했는데 새로 시작을 할 경우가 임의로 종료를 할 때 clearInterval로 종료해주어야 한다.

clearInterval을 사용하지 않으면 새롭게 시작되거나 종료되었을 때 인터벌 이벤트가 계속해서 발생하기때문에 시간 감소가 중복으로 처리된다 그래서 5번 실행하면 한번에 5초씩 팍팍 깎이는 것을 볼 수 있을 것이다.

예제에 사용된 코드 실행확인 https://codepen.io/johnbling/pen/BaxVrdZ

관련