DrawDev
43
2021-05-18 18:50:46
4
229

자바스크립트로 타임 증가 코드를 짜봤는데 중첩이 됩니다.


html

<span>타이머</span>
  <span id='timer'>0 분 0 초</span>
  <input type="button" value="시작" onclick='start()' >

javascript

let sec = 0
let min = 0

function start() {
  setInterval(function() {
  
    if (sec==59) {
      min ++
      sec = -1
    }
    sec++
    document.querySelector('#timer').innerHTML = `${min} 분 ${sec} 초`;
  
  },1000)
}

버튼을 누르면 타이머가 시작되는 버튼인데요

버튼을 여러번 누르면 증가도 중첩이 됩니다..

순수 JS로 어떻게 해결해야 할까요 ?

0
  • 답변 4

  • 킁킁탐정
    844
    2021-05-18 19:03:10

    setInterval를 1회만 호출하도록 변경하시면 됩니다. 여러가지 방법이 있을 수 있습니다. 가장 간단하게 처리하자면 다음과 같이 하시면됩니다. 참고하시면 도움이 되실꺼 같습니다.


    let sec = 0
    let min = 0
    let handle = null
    function start() {
    if (handle) {
    return
    }
    handle = setInterval(function() {
    if (sec==59) {
    min ++
    sec = -1
    }
    sec++
    document.querySelector('#timer').innerHTML = `${min}${sec} 초`;
    },1000)
    }
  • 서노
    280
    2021-05-18 19:18:28


    function start() {
      if (timer.sec !== undefined) {
        return;
      }
    
      timer.sec = 0;
      timer.min = 0;
    
      setInterval(function() {
        if (timer.sec == 59) {
          timer.min++
          timer.sec = -1
        }
        timer.sec++;
        timer.innerHTML = `${timer.min} 분 ${timer.sec} 초`;
      }, 1000)
    }
    


  • DrawDev
    43
    2021-05-19 06:32:33

    두분 모두 감사합니다. 이해가 안가는것이 있는데 return 을 하면 해당블록, if문이 종료되는걸 넘어 함수 전체가 종료되는건가요 ? 

  • 서노
    280
    2021-05-19 13:02:13

    네.

    추가적으로 event.preventDefault도 알아두시면 되겠네요.

  • 로그인을 하시면 답변을 등록할 수 있습니다.