[javascript] StopWatch를 통해 보는 시간지연함수

 

clearInterval(), setInterval()

타이머 함수라도고 불리는 setInterval()은 지정된 시간 간격으로 작업을 수행하기 위해 만들어진 함수이다. clearInterval은 실행중인 작업을 중지하는 게 아니라 주어진 작업을 모두 끝낸 후 다음 작업을 중지시키는 함수이다.

HTML

<div class="wrapper">
  <h1>Stopwatch</h1>
  <h2>Vanilla JavaScript Stopwatch</h2>
  <p>
    <span id="seconds">00</span>:<span id="tens">00</span>
  </p>
  <ul id="laps">
  </ul>
<button id="button-start">Start</button>
<button id="button-lap">Lap</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div> 

Javascript

초기세팅

  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart = document.getElementById('button-start');
  var buttonLap = document.getElementById('button-lap');
  var buttonStop = document.getElementById('button-stop');
  var buttonReset = document.getElementById('button-reset');
  var lapList = document.getElementById('laps');
  var lapCounter = 1;
  var Interval;

• start 버튼 클릭 시

  buttonStart.onclick = function() {
     clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }

 function startTimer () {
    tens++; 

// 두 자리 숫자로 표현해 주기 위해 나눔
    if(tens < 9){
      appendTens.innerHTML = "0" + tens;
    }

    if (tens > 9){
      appendTens.innerHTML = tens;
    } 

// ms가 꽉 찰 경우 seconds로 값을 넘겨줌
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }

// seconds가 9 이상이면 앞에 "0" 붙이지 않음
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
  }

• stop 버튼 클릭 시
  현재 진행되는 startTimer 이벤트를 마지막으로 이벤트 중지

    buttonStop.onclick = function() {
       clearInterval(Interval);
  }

• reset 버튼 클릭 시
  저장된 모든 정보를 초기 상태로 되돌림. localStorage에 저장된 정보도 리셋

  buttonReset.onclick = function() {
     clearInterval(Interval);
    tens = "00";
      seconds = "00";
    appendTens.innerHTML = tens;
      appendSeconds.innerHTML = seconds;
    lapList.innerHTML = "";
    lapCounter = 1;
    storeLaps();
  }

• labs 버튼 클릭 시
  innerHTML을 통해 시간을 저장. localStorage에 저장해서 reload 시에도 정보가 남아있게 함

  buttonLap.onclick = function() {
    lapList.innerHTML += '<li> <span class="lap-seconds">' +       appendSeconds.innerHTML + '</span>:<span class="lap-tens">' + appendTens.innerHTML + '</span> -- Lap ' + lapCounter +'</li>';
    lapCounter++;
    storeLaps();
  }
  
  function storeLaps() {
    window.localStorage.myLaps = lapList.innerHTML; 
  }

• getlaps
  Reload 시 마지막 정보를 불러오도록 함

  function getLaps(){
    lapList.innerHTML = window.localStorage.myLaps;
  }
  getLaps();