타이머 끝나기 전 '인증번호 전송' 누르면 타이머가 겹치는 문제
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요 최종 과제에서 타이머를 다시 만드는데, 타이머 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()함수를 실행하면 또 타이머가 겹칩니다. ㅠㅠ 이렇게 저렇게 바꿔봐도 해결이 안되서 그냥 인증과 동시에 인증번호생성 버튼을 비활성화 시켰습니다... 어떻게 타이머 작동중에 [인증 전송]버튼 누르면 겹침문제없이 다시 타이머가 초기화되도록 할 수 있나요?
- final
- HTML/CSS
- timer
- javascript
- 타이머
- 최종과제
- 인증번호