• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

final 과제 타이머 부분 질문드립니다!

23.09.29 08:07 작성 23.09.29 08:08 수정 조회수 217

0

안녕하세요! 제가 파이널 과제를 진행하다가 인증번호 전송부터 인증 완료 단계의 자바스크립트 코드를 작성하면서 어려움을 겪고 있어서 문의드립니다. 해당 코드를 적용하여 html 파일을 실행시킨 결과 인증완료 버튼을 눌러도 인증번호만 초기화가 되고 타이머는 그대로 1초씩 감소하는 상태가 유지되었습니다. clearInterval(timer)를 하면 반복함수가 멈춰 document.getElementById("timer").innerText = "3:00";의 결과로 3:00이 되는 것으로 생각했는데 왜 초기화가 되지 않는지 도통 모르겠습니다.

 

<div class="certification">
        <div id="certificationNumber">000000</div>
        <button id="sendButton" disabled = "true" onclick="submit()">인증번호 전송</button>
      </div>
      <div class="certification">
        <div id="timer">3:00</div> 
        <button id="completeButton" disabled = "true" onclick="completeMessage()">인증 확인</button>
let timer
let isStarted = false

const submit = () => {
  const token = String(Math.floor( Math.random() * 1000000)).padStart(6, "0");
  document.getElementById("certificationNumber").innerText = token;
  document.getElementById("sendButton").setAttribute("disabled", "true")
  document.getElementById("completeButton").removeAttribute("disabled")

  
  if(isStarted === false) {
    // 타이머가 작동중이 아닐때
    isStarted = true 
    
    let time = 180
    
    
    timer = setInterval(function(){
      
      if(time >=0) {
        let min = Math.floor(time/60)
        let sec = String(time%60).padStart(2, "0")
        document.getElementById("timer").innerText = min + ":" + sec;
        time = time -1
      }

      else {
          document.getElementById('completeButton').disabled = true;
          isStarted = false
          document.getElementById("certificationNumber").innerText = "000000";
          document.getElementById("timer").innerText = "3:00";
          
          clearInterval(timer)
      }
    },1000)
    
} 
  else {

}

}

const completeMessage = (timer) => {
    clearInterval(timer)
    alert("인증이 완료되었습니다.")
    document.getElementById('completeButton').disabled = true;
    isStarted = false
    

    document.getElementById("completeButton").innerText = "인증 완료"
    document.getElementById("signup").disabled = false;
}
course-thumbnail

[코드캠프] 시작은 프리캠프

답변 2

·

답변을 작성해보세요.

1

노원두님의 프로필

노원두

지식공유자

2023.10.06

안녕하세요! uaho021225님!

해당 문제를 이해하기 위해서는 변수가 사용되는 범위에 대한 이해가 필요합니다!
이를 아주 어려운 말로 "스코프"라고 하며, 뒷부분 파트에서 자세하게 설명합니다!^^

 

아래의 코드를 예시로 설명을 드려볼게요!

const 사과 = 3

const 나의함수A = () => {
   console.log(사과) // 3
}

const 나의함수B = () => {
   const 사과 = 5
   console.log(사과) // 5
}

위 코드를 보시면, 사과를 함수 안에서 재선언 함으로써, 해당 함수 안에서는 5개를 읽어오게 됩니다!
만약, 해당 함수 안에 사과가 없는 경우에는 밖에 있는 3개를 읽어오게 되겠지만 말이에요!

 

또한, 함수는 값을 주고받을 수도 있는데요, 아래를 한 번 볼게요!

const 나의함수A = (사과) => {
   console.log(사과) // 100
}

나의함수A(100)

 

위 내용을 보시면, 함수에서 값을 받아오는 경우, 이 값이 함수 내부에 선언되게 됩니다!

쉽게 예를 들면, 아래와 같이 된다고 보시면 이해하기 쉬워요!

const 나의함수A = (사과) => { // let 사과 = 100
   console.log(사과) // 100
}

나의함수A(100)

 

여기까지 따라오셨다면, 아래의 결과에서, 사과가 3이 아닌 500인 이유를 이해하실 수 있겠죠?!

const 사과 = 3

const 나의함수A = (사과) => { // let 사과 = 500
   console.log(사과) // 500
}

나의함수A(500)

 

이를 위의 timer코드에 적용해보면 문제점이 한가지 보입니다!
아래에 기입된 번호를 따라 주석을 읽어주세요!

let timer // 1.타이머를 저장할 변수 만들기
let isStarted = false

const submit = () => {
   ...
   생략
   ...

   timer = setInterval(function(){ // 2.타이머변수에 타이머기능 넣기
      ...
      타이머작동
      ...
   }

   ...
   생략
   ...
}

const completeMessage = (timer) => {
   clearInterval(timer) // 3.타이머변수 종료하기 
                        //   => 문제발생: 이 timer가 위 1번의 timer를 종료해야하므로
                        //              해당 함수 내에 timer라는 변수가 선언되어있거나,
                        //              외부로부터 받아오면 안됨
                        //              따라서, completeMessage = (timer) => { 
                        //              부분의 timer를 지워주셔야겠죠?!
   alert("인증이 완료되었습니다.")
    
   ...
   생략
   ...
}

 

마지막 3번까지 읽어주셨다면, 해당 내용을 적용해 보세요!^^

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.10.01

안녕하세요, 인프런 AI 인턴이에요.

타이머 초기화가 정상적으로 이루어지지 않는 이유는 코드의 일부분이 누락되어 있기 때문입니다. clearInterval(timer)는 clearInterval 함수를 사용하여 타이머를 초기화하는 것이 맞지만, 코드 상에서 이 함수를 호출하는 부분이 없어서 타이머가 멈추지 않고 계속해서 감소하게 됩니다.

타이머를 초기화하려면 completeMessage 함수 내에 clearInterval(timer)를 추가해야 합니다. 다음과 같이 코드를 수정해보세요.

const completeMessage = () => {
  clearInterval(timer);
  document.getElementById("timer").innerText = "3:00";
  // 인증 완료 동작 수행
}

위의 코드에서 clearInterval(timer)를 호출하여 타이머를 멈추고, document.getElementById(“timer”).innerText = “3:00”를 사용하여 타이머를 초기화합니다.
이렇게 하면 인증 확인 버튼을 눌렀을 때 타이머가 초기화되고, 인증 번호는 그대로 유지될 것입니다.

문제가 해결되지 않는다면, 코드의 다른 부분에 오류가 있는지 확인해보세요. 변수명이나 함수의 호출 방법, 태그의 id 등에 오타가 있는지 확인하여 수정해야합니다.
더 정확한 답변을 드리기 위해서는 전체 코드를 확인해야 하므로, 필요하다면 전체 코드를 공유해주시기 바랍니다.

답변이 도움이 되었으면 좋겠습니다. 추가로 궁금한 점이 있으면 언제든지 물어보세요. 수고하세요!

이 글과 비슷한 Q&A