[Javascript] 내장함수 - 타이머함수 (setTimeOut / setInterval / timer / 은행 세션 만료 구현)

* 개요

javascript를 이용하여 특정 시간에 따른 기능 제어가 필요할 경우 아래 내장함수를 사용하여 구현한다.

 

 

* 메서드 정의

 

setTimeout(function, millisecond) - 일정 시간 후 함수 실행

 

setInterval(function, millisecond) - 일정 주기로 함수 반복 실행

 

clearTimeout(id) - 식별자의 setTimeout 동작 중단
clearInterval(id) - 식별자의 setInterval 동작 중단

 

 참고사항
> 시간 - 밀리세컨드 (1000 = 1초)
> setTimeout / setInterval은 백그라운드에서 실행되므로 다른 메소드의 동작에 영향을 주지 않음
> 반환값으로 식별자를 반환하는데 이를 이용하여 setTimeout / setInterval 함수를 중지 시킬수 있음

 

timerId = setTimeout(function () {alert('setTimeout');} , 1000);  //타이머에 대한 고유 식별자를 리턴
clearTimeout(timerId) // 타이머 종료

 

 = > alert이 뜨지 않음!

 

 

* 10분 세션 만료 구현 예제(ex 은행 세션 만료)

 

<script>
/* 전역 변수 */
var initMinute;  // 최초 설정할 시간(min)
var remainSecond;  // 남은시간(sec)
 
$(document).ready(function(){
   clearTime(10); // 세션 만료 적용 시간 
   setTimer();    // 문서 로드시 타이머 시작
});
 
function clearTime(min){ // 타이머 초기화 함수
   initMinute = min; 
   remainSecond = min*60; 
}
 
function setTimer(){ // 1초 간격으로 호출할 타이머 함수 
 
   // hh : mm 으로 남은시간 표기하기 위한 변수
   remainMinute_ = parseInt(remainSecond/60);
   remainSecond_ = remainSecond%60;
 
   if(remainSecond > 0){
      $("#timer").empty();
      $("#timer").append(Lpad(remainMinute_,2) + ":" + Lpad(remainSecond_,2));    // hh:mm 표기
      remainSecond--;
      setTimeout("setTimer()",1000); //1초간격으로 재귀호출!
   }else{
      alert('세션종료');
      /*세션 종료시 작동할 이벤트*/ 
   }
}
 
function Lpad(str,len){  // hh mm형식으로 표기하기 위한 함수
   str = str+"";
   while(str.length<len){
      str = "0"+str;
   }
   return str;
}
</script>