728x90
반응형

자바스크립트로 구현한 실시간 타임아웃 기능

이번에 고객사에서 커스터마이징 요청한것중에 한개인 실시간 타임아웃 기능이다. 

타임아웃 시간이 지나면 자동으로 로그아웃되고 사용자가 시간연장 버튼을 클릭하였을시에  

값이 초기화 되어 다시 처음부터 카운트를 세는 로직이다. 

1. setTimeout() 을 이용하여 실시간 으로 재귀호출하여 타이머를 구현

2. 시간연장 버튼 클릭시 Ajax 로 특정 dummy page 에 비동기 호출을 하여 세션을 유지시킨뒤 시간값 초기화

3. 로그아웃시 Ajax 로 서버측 로그아웃 컨트롤러로 요청후 페이지 새로고침 

아래는 timeoutchk.js  의 소스이다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var iSecond; //초단위로 환산
var timerchecker = null;
window.onload = function() {
    fncClearTime();
    initTimer();
}
 
function fncClearTime() {
    iSecond = 7200;
}
 
Lpad = function(str, len) {
    str = str + "";
    while (str.length < len) {
        str = "0" + str;
    }
    return str;
}
 
initTimer = function() {
    var timer = document.getElementById("timer");
    rHour = parseInt(iSecond / 3600);
    rHour = rHour % 60;
 
    rMinute = parseInt(iSecond / 60);
    rMinute = rMinute % 60;
 
    rSecond = iSecond % 60;
 
    if (iSecond > 0) {
        timer.innerHTML = "&nbsp;" + Lpad(rHour, 2) + "시간 " + Lpad(rMinute, 2)
                + "분 " + Lpad(rSecond, 2) + "초 ";
        iSecond--;
        timerchecker = setTimeout("initTimer()", 1000); // 1초 간격으로 체크
    } else {
        logoutUser();
    }
}
 
function refreshTimer() {
    var xhr = initAjax();
    xhr.open("POST", "/jsp_std/kor/util/window_reload2.jsp", false);
    xhr.send();
    fncClearTime();
}
 
function logoutUser() {
    clearTimeout(timerchecker);
    var xhr = initAjax();
    xhr.open("POST", "/mail/user.public.do?method=logout", false);
    xhr.send();
    location.reload();
}
 
function initAjax() { // 브라우저에 따른 AjaxObject 인스턴스 분기 처리
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
 


아래는 timeoutchk.js 를 사용하여 시간을 보여주는 HTML 폼이다.

1
2
3
4
5
6
7
          <td class="btn_bgtd_timeout" align="right">
              <script type="text/javascript" charset="utf-8" src="/js_std/kor/util/timeoutchk.js"></script>
             <span id="timer"></span>
             &nbsp;
             <a href="javascript:refreshTimer();"><img src="/images_std/kor/btn/btn_time_extension.gif" align="top"></a>
             &nbsp;&nbsp;&nbsp;
          </td>


아래이미지와 같이 기능이 구현된다. 


728x90
반응형

+ Recent posts

티스토리툴바