[javascript] 이메일 인증번호 타이머(유효시간 연장기능)

 

이메일을 보냄과 동시에 타이머를 작동시켜 일정 시간이 지나면

인증번호를 입력하지 못하도록 막는 기능을 구현중에 유효시간 연장이라는 기능도 같이 만들어야 했다.

어영부영 만들어 놓고 보니 시간 연장을 클릭하면 타이머가 하나 더 생기며 동시에 두 개, 세 개, 네 개의 타이머가 동시에 돌기 시작했다.

오류는 isRunning이라는 플래그 변수를 만들어 해결했다.

 

 

Script

<script>

var timer = null;
var isRunning = false;
$(function(){

	    $(".btn_recive_num").click(function(e){
    	var display = $('.time');
    	var leftSec = 180;
    	// 남은 시간
    	// 이미 타이머가 작동중이면 중지
    	if (isRunning){
    		clearInterval(timer);
    		display.html("");
    		startTimer(leftSec, display);
    	}else{
    	startTimer(leftSec, display);
    		
    	}
    });
})

    
function startTimer(count, display) {
            
    		var minutes, seconds;
            timer = setInterval(function () {
            minutes = parseInt(count / 60, 10);
            seconds = parseInt(count % 60, 10);
     
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
     
            display.html(minutes + ":" + seconds);
     
            // 타이머 끝
            if (--count < 0) {
    	     clearInterval(timer);
    	     alert("시간초과");
    	     display.html("시간초과");
    	     $('.btn_chk').attr("disabled","disabled");
    	     isRunning = false;
            }
        }, 1000);
             isRunning = true;
}


</script>

 

 

인증번호 6자리 난수 생성을 위한 코드는 아래

2020/09/22 - [spring boot] - [springboot] 문자+숫자, 숫자 6자리 난수 만들기

[springboot] 문자+숫자, 숫자 6자리 난수 만들기