이전에 만들었던 버튼을 누르면 인증 시간이 나오고 시간이 끝나면 버튼이 비활성화 되는 화면
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 해주면 문제없이 정상적으로 돌아간다.