타이머 끝나기 전 '인증번호 전송' 누르면 타이머가 겹치는 문제
안녕하세요최종 과제에서 타이머를 다시 만드는데, 타이머 3분이 끝나기 전에 '인증번호 전송'을 다시 누르면 타이머가 겹쳐서 시간이 이상하게 표기됩니다.수업때는 조건이 time < 0일때, clearInterval(timer) 로 해결한다고 하셨는데, 타이머 끝나기 전에는 타이머가 초기화되지않아서요... 아래는 제 코드와 설명입니다. (final.js 파일 안)
let isStarted = false
// 인증번호 생성 및 타이머 함수. 인증번호 버튼 onclick="startTimer()"로 되어있음.
let startTimer = () => {
if (isStarted === false){
isStarted = true
// 인증번호 생성
let token = String(Math.floor(Math.random() * 0xffff)).padEnd(6, "0")
document.getElementById("auth__number").innerText = token
// 인증확인 버튼 활성화 & //인증 전송 비활성화
document.getElementById("auth__checkbtn__id").disabled = false
//document.getElementById("auth__sendbtn__id").disabled = true
// 타이머 시작 (5초)
let time = 5
let timer
clearInterval(timer)
timer = setInterval(() => {
if (time >= 0 && isStarted){ //여기 isStarted 조건 추가해 중복타이머 막음
let min = Math.floor(time / 60)
let sec = String(time % 60).padStart(2,"0")
document.getElementById("auth__time").innerText = min + ":" + sec
time = time - 1
} else {
document.getElementById("auth__checkbtn__id").disabled = true
document.getElementById("auth__sendbtn__id").disabled = false
//isStarted = false
// 그렇다고 여기에 isStarted = false 더쓰면 또 겹침... 깨끗한 상태로 시작이 왜안되지?
clearInterval(timer)
document.getElementById("auth__time").innerText = '3:00'
document.getElementById("auth__number").innerText = '000000'
}
}, 1000)
} else {
// **타이머 작동중일때. isStarted 상태 바꾸기.. **
// 그러나 다시 If문을 진입해 타이머 재시작하려면 다시 [인증 전송]버튼 눌러야함
isStarted = false
console.log('타이머 작동중임')
// clearInterval(timer)는 위의 If문 안에있어 불러올 수 없음.
// startTimer()를 재귀적으로 불러오면 또 다시 타이머 겹침
}
}
<로직>1. 타이머가 작동중이지 않을때 버튼 누름 (isStarted = false 상태) 2. 타이머 시작 (isStarted = true 상태)3. ** 타이머가 작동중일때 [인증 전송 버튼] 다시 누름 (isStarted = false로 바꿈) ** --> 타이머가 재시작 하지 않음 (함수는 else문에서 끝났기 때문)4. 재시작위해 [인증 전송버튼] 다시 누름 (3단계에서 isStarted가 false로 바뀌어서 이제 타이머 다시시작)**표시 있는 else문**(3단계)에서 IsStarted = false로 바뀌고 else문이 끝났기 때문에,다시 타이머를 시작하도록 재귀적으로 startTimer()함수를 실행하면 또 타이머가 겹칩니다. ㅠㅠ 이렇게 저렇게 바꿔봐도 해결이 안되서 그냥 인증과 동시에 인증번호생성 버튼을 비활성화 시켰습니다... 어떻게 타이머 작동중에 [인증 전송]버튼 누르면 겹침문제없이 다시 타이머가 초기화되도록 할 수 있나요?
