인프런 커뮤니티 질문&답변
작성한 질문수
섹션1 : 시작은 프리캠프 final 과제 타이머 부분 JS 문의
해결된 질문
작성
·
369
·
수정됨
0
프리캠프 final sign up 과제 중 타이머 부분 관련 문의드립니다.
자바스크립트 이용하여 '인증번호 전송' 버튼을 누르면 타이머가 동작하는 부분까지는 구현하였습니다.
이후 타이머 동작 중, 인증 완료 버튼을 누르면 "인증 완료" 팝업이 뜨고
타이머가 종료되며 "인증 완료" 텍스트로 표시되도록 하고싶은데 팝업이 뜨고 텍스트는 변경되나 바로 다시 타이머가 동작합니다.
(consle.log 를 찍어보면 인증완료 버튼 클릭 시 '인증완료' 로그가 찍히나, 타이머는 그대로 동작하고 00초가 되면 '시간 초과' 로그도 찍힙니다.)
else 뒤에 넣는 것이 아니라 아예 따로 빼서 onclick 함수를 새로 만들어야 할까요? 답변 부탁드립니다!
아래는 제가 작성한 코드입니다.
// 타이머 작동 & 인증버튼 활성화 //
let isStarted = false;
let auth = () => {
if(isStarted === false) {
// 버튼 클릭 시 인증번호 부여 및 타이머 작동 //
isStarted = true
document.getElementById("b2").disabled = false
document.getElementById("b2").style.color = "white"
document.getElementById("b2").style.border = "1px solid #0068ff"
document.getElementById("b2").style.backgroundColor = "#0068ff"
document.getElementById("b2").style.cursor = "pointer"
const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0")
document.getElementById("target").innerText = token
let time = 10
let timer
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("b2").disabled = true
document.getElementById("b2").style.color = "#d2d2d2"
document.getElementById("b2").style.border = "1px solid #d2d2d2"
document.getElementById("b2").style.backgroundColor = "transparent"
document.getElementById("b2").style.cursor = "default"
document.getElementById("timer").innerText = "3" + ":" + "00"
document.getElementById("target").innerText = "000000"
console.log("시간 초과")
isStarted = false
clearInterval(timer)
}
},1000)
} else {
// 타이머가 작동중일 때 인증 확인 클릭하면 //
alert("인증완료")
document.getElementById("b2").disabled = true
document.getElementById("b2").style.cursor = "default"
document.getElementById("timer").innerText = "인증완료"
isStarted = true
clearInterval(timer)
console.log("인증 완료")
}
}답변 1
0
안녕하세요! 티몬님!
단순히 커리큘럼을 따라오는 것만이 아닌, 자체적으로 질문을 가지고 시도해보는 자세 너무 좋아요!
빠른 성장이 기대되네요!^^
해당 질문을 보면, 모든 것이 원하시는대로 동작하는 것처럼 보여요!, 단지 타이머가 제거되지 않는다는 것만 빼구요!
그렇다면, else문에서 타이머를 제거하는 clearInterval(timer) 이 부분에 문제가 있다고 보여지네요!
중괄호{ } 안에서 만든 변수는, 해당 중괄호{ } 안에서 사용할 수 있어요!(더 자세한 내용은 JS수업에서 배워요!)
timer가 만들어진 곳은 if { ... } 안쪽인데, clearInterval로 삭제하려는 부분은 else { ... } 안쪽 중괄호에서 삭제하고 있네요!
만든곳과 사용할 곳의 범위가 다르니 삭제할 수 없어요!
따라서, timer를 if{ ... } else { ... } 를 모두 포함하는 바깥쪽 중괄호 { } 에다가 만들어 주셔야해요!
let auth = () => {
let timer; // auth의 중괄호 { } 안에 만들어 주셔야 그 안의 모든 공간에서 사용 가능해요!
if(){
// let timer // 여기서 만들면 안돼요!
// 여기서 만들면, if의 중괄호 { } 안에서만 사용 가능해져요!
// ...
} else {
// ...
clearInterval(timer);
// ...
}
}
timer 변수를 밖으로 뺄 수 있다는 생각은 하지 못했었는데 생각이 확장되어 단순히 timer 변수를 밖으로 빼는 것 만으로는 해결되지 않고, 코드 구조 자체에 문제가 있었다는 것을 깨달았습니다.
덕분에 지금은 제가 의도한 대로 작동하고 있습니다. 답변 정말 감사합니다!