인프런 커뮤니티 질문&답변

안녕하세요

최종 과제에서 타이머를 다시 만드는데,
타이머 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()함수를 실행하면 또 타이머가 겹칩니다.

ㅠㅠ 이렇게 저렇게 바꿔봐도 해결이 안되서 그냥 인증과 동시에 인증번호생성 버튼을 비활성화 시켰습니다...

어떻게 타이머 작동중에 [인증 전송]버튼 누르면 겹침문제없이 다시 타이머가 초기화되도록 할 수 있나요?