JS - clearInterval

오늘 작성한 코드에 대해 복습하며, 버튼을 누르다가 이상한 점을 발견했다

버튼을 연타하면, 누른 횟수만큼 추가적으로 1초씩 빨리 진행된다는 것

interval 을 실행시키기만 하고, 멈추는 코드가 없으니 당연한 것이기도 했다

 

const auth = () => {
    const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0")
    document.getElementById("target").innerText = token
    document.getElementById("target").style.color = "#" + token
    
    let time = 180
    setInterval(() => {
        if(time>=0){
            let min = Math.floor(time/60)
            // 3:0으로 나타나지 않기 위해, '나머지'를 문자열화 한 후, padStart 활용
            let sec = String(time%60).padStart(2,"0")
            // 이때 원하는 위치인 id="timer"에 시간이 입력되게끔 함
            document.getElementById("timer").innerText = min + ":" + sec
            // 시간을 하나씩 빼는 것 잊지 않기
            time=time-1
        } else {
            document.getElementById("complete").disabled = true
        }
        }, 1000);
    }

이후 이 문제를 해결하기 위해 구글을 서칭했지만 역시 구글 선생님은 쉽게 알려주지 않는다

 

올라와 있는 게시글과 코드들은 작성자 입맛대로 향신료가 쳐발린 채로 써있고, 나는 아직 죽밖에 못먹는 애기 입맛이다

 

그러나 티스푼모아 태산이라 했던가

 

여기저기 긁어모으다 보니 알음알음 해답에 가까워지는 것 같은 느낌을 받았다

 

time = null;
let interval = null;
 
const auth = () => {
    const token = String(Math.floor(Math.random()*1000000)).padStart(6,"0")
    document.getElementById("target").innerText = token
    document.getElementById("target").style.color = "#" + token
    // **추가한 내용 0:00초가 된 뒤, 다시 인증번호 전송버튼을 누를 시 시간 초기화 및 / 버튼 활성화
    document.getElementById("timer").innerText = "3:00"
    document.getElementById("complete").disabled = false
    timeReset()
    timeStart()
    }
 
let timeStart = () => {
    time = 179
    interval = setInterval(timeChecker, 1000)
}
let timeReset = () => {
    clearInterval(interval)
}
 
let timeChecker = () => {
    if(time>=0){
        // 3:0으로 나타나지 않기 위해, '나머지'를 문자열화 한 후, padStart 활용
        let min = Math.floor(time/60)
        let sec = String(time%60).padStart(2,"0")
        // 이때 원하는 위치인 id="timer"에 시간이 입력되게끔 함
        document.getElementById("timer").innerText = min + ":" + sec
        // 시간을 하나씩 빼는 것 잊지 않기
        time=time-1
        console.log("손끝으로돌리며시곗바늘아달려봐")
    } else {
        document.getElementById("complete").disabled = true
    }
    }

먼저, interval 함수를 분리해줘야 했다

 

왜냐하면, interval을 초기화시키는 clearInterval이, 인터벌 함수(?) 이름을 받기 때문이었다
(기존에 작성한 interval은 딱히 이름이 지어지지 않았었음)

 

어쨌든 이 친구는 인터벌이 시작될 때만 실행되기 때문에 초기 시간은 179로 설정하고 timeStart 라고 이름 붙였다

 

--

timeChecker 함수는 기존 timeStart와 분리된 "시간 형식"을 보여주는 친구이기 때문에 설명은 생략한다

 

--

이후 clearInterval을 사용했다

interval = setInterval(timeChecker, 1000) 이 친구를 멈춰야 하기 때문에

clearinterval(interval)로 받았다

 

--

마지막으로 버튼 onClick으로 연결되어 있는 auth() 밑에

timeReset() timeStart()를 차례로 작성했다

 

--

사실 여기까지 해서는 코드가 제대로 작동되지 않는다

변수 interval은 timeStart() 안에만 있기 때문에,

auth() -> timeReset이 진행되는 과정에서

불쑥 나타난 interval에 대해서 이해하지 못하는 것이다

 

--

이 문제를 맞닥뜨리고

처음 사용해보는 clearInterval을 잘못 사용해 생겨난 오류라 생각했던 나는

계속해서 구글 서칭을 이어나가다 우연히 딩코 QnA 게시판에서 힌트를 얻을 수 있었다

 

전역 변수와 지역 변수에 대한 동기님의 질문과 멘토님의 답변

아차차차차,

 

이를 내 문제에 바로 적용할 수 있겠다 싶었던 나는

 

이내,

 

코드 맨 위에

 

작성했다

 

let interval = null;

 

아아,

정말 이 문제를 해결한 것인가 하는 짧은 단상과

그리고 찾아온 아나스타샤