프론트 027

규링규링규리링·2024년 8월 16일

프론트 공부하기

목록 보기
27/135

만들었던 인증 타이머 보완하기

이전에 만들었던 버튼을 누르면 인증 시간이 나오고 시간이 끝나면 버튼이 비활성화 되는 화면

function get__Authen__number(){
    let a = String (Math.floor(Math.random() * 1000000)).padStart(6,0)
    document.getElementById("Authen__number").innerText = a

    let time = 5
    setInterval(function(){
        if(time >= 0){
        let time__min = Math.floor(time/60);
        let time__sec = String(time%60).padStart(2, '0');
        document.getElementById("timer").innerText = time__min+" : "+time__sec
        time = time - 1
        } else{
            document.getElementById("finish__button").disabled=true
        }
    },1000)
}

해당 내용은 사용하다 보면 인증번호 전송을 누를 때 마다 완전 초기화되고 다시 실행이 된다.
타이머가 돌고있을때는 새로운 인증번호가 전송되지 않게 하자

let isStarted = false; 

function get__Authen__number(){

    if(isStarted===false){
        isStarted = true
        document.getElementById("finish__button").disabled = false

        let a = String (Math.floor(Math.random() * 1000000)).padStart(6,0)
        document.getElementById("Authen__number").innerText = a

        let time = 10
        let timer

        setInterval(function(){
            if(time >= 0){
            let time__min = Math.floor(time/60);
            let time__sec = String(time%60).padStart(2, '0');
            document.getElementById("timer").innerText = time__min+" : "+time__sec
            time = time - 1
            } else{
                document.getElementById("finish__button").disabled=true
                isStarted = false;
            }
        },1000)

    } else {

    }
}

이런식으로 만들면 잘 동작이 되다가
한번 시간이 만료되고 다시 인증번호를 받을때 인증 완료버튼이 바로 비활성화 되버린다
setInterval의 상태가 저장되어서 바로 else 구문이 동작되기 때문이다.
해당 부분을

timer = setInterval(function(){
  if(time >= 0){
    let time__min = Math.floor(time/60);
    let time__sec = String(time%60).padStart(2, '0');
    document.getElementById("timer").innerText = time__min+" : "+time__sec
    time = time - 1
  } else{
    // 동작이 끝났을 때
    document.getElementById("finish__button").disabled=true
    isStarted = false;
    clearInterval(timer)
  }
},1000)

timer 에 setInterval을 할당하고
마지막에 clear 해주면 문제없이 정상적으로 돌아간다.

0개의 댓글