setInterval(), clearInterval()
이름에서 유추할 수 있듯 특정 시간 간격으로 실행하는 함수이다
setInterval()로 인터벌을 설정하고 clearInterval()로 인터벌을 제거할 수 있다
예시로 인증번호 입력란을 인터벌 설정하여 10초 이내에 입력 하는 란을 활성화 하는 기능을 적용해보았다
view
<div id="otpGroup">
<input type="text" id="inputOtp" name="inputOtp" placeholder="OTP" disabled="disabled">
<button type="button" id="createOtpBtn">발송</button>
<div id="otpMessage"></div>
</div>
js
$(document).ready(function(){
$('#createOtpBtn').click(function(e) {
$('#inputOtp').attr('disabled',false);
$('#otpMessage').css('display', 'none');
let timer = null;
let isRunning = false;
countdown(timer, isRunning);
});
});
function countdown(timer, isRunning){
let display = $("#otpMessage");
let count = 10; //유효초
let minutes, seconds, txt;
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;
txt = "인증번호를 입력해주세요. ("+ minutes + ":" + seconds + ")";
txt = display.text(txt);
if (--count < 0) {
clearInterval(timer);
display.text("인증시간이 초과되었습니다.");
display.css('color', 'red');
$('#userOtp').attr('disabled', 'disabled');
isRunning = false;
}
}, 1000);
isRunning = true;
}
++ 위의 코드로 기능을 구현했을 때 버튼을 연달아 클릭할시 setInterval()이 중복으로 적용되어 메세지가 여러번 바뀌는 버그를 발견하였다
중복을 방지하기 위해 인터벌을 설정할 timer 변수를 전역변수로 담은 후 setInterval(timer ) 선언전에 clearInterval(timer )을 추가하였다
그렇게 수정한 js가 아래 코드이다
$(document).ready(function(){
var timer;
$('#otpBtn').click(function(e) {
let display = $("#otpMessage");
$('#userOtp').attr('disabled',false);
display.removeClass('dp-none');
display.css('color', '#007bff');
//test code starts here
const otpLength = 6;
let otp = Math.random().toString().substr(2, otpLength);
$('#createOtp').val(otp);
$('#userOtp').val(otp);
//test code ends here
const count = 30;
let min = parseInt(count / 60, 10);
let sec = parseInt(count % 60, 10);
function showMessage() {
if(min == 0 && sec == 0) {
clearInterval(timer);
$('#userOtp').attr('disabled', 'disabled');
display.text("인증시간이 초과되었습니다.");
display.css('color', 'red');
return;
}
min = min < 10 ? ("0" + min).slice(-2) : min;
sec = sec < 10 ? ("0" + sec).slice(-2) : sec;
display.text("인증번호를 입력해주세요. ("+ min + ":" + sec + ")");
if(sec == 0) {
min--;
sec = 59;
} else {
sec--;
}
}
clearInterval(timer);
timer = setInterval(showMessage, 1000);
});
}
참고자료
https://developer.mozilla.org/ko/docs/Web/API/setInterval
setInterval() - Web API | MDN
Window 및 Worker 인터페이스에서 제공되는 setInterval() 메서드는 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
developer.mozilla.org
https://developer0809.tistory.com/149
[#. Javascript] 휴대폰, 이메일 인증번호 타이머
버튼을 클릭했을 때 인증번호를 입력할 수 있는 유효시간 타이머가 시작되고 버튼을 다시 클릭했을 시 유효시간 재시작 만료됐을 시 `시간초과`라는 alert와 텍스트가 노출된다 var timer = null; var i
developer0809.tistory.com
https://aljjabaegi.tistory.com/423
Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법
Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법 JavaScript 에서 setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용합니다. 예를 들어 1
aljjabaegi.tistory.com
https://mongwani.tistory.com/15418897
[JavaScript + JQuery] setInterval 초기화 - 카운트다운 타이머 중복 적용 해결
후.. 진짜 고생했습니다. 이번에 해외 고객들의 메일 인증을 가입 후 진행하는게 아니라 가입전에 인증을 받아놓고 진행하기로 해서 그렇게 변경하는데요.. 카운트다운 타이머는 찾아서 복붙한
mongwani.tistory.com
