본문 바로가기

Dev-/java script, jQuery, Ajax

순수 자바스크립트 유휴시간 체크(check idle time)

사용자가 일정시간 반응이 없을때, 

자동으로 로그아웃 처리를 해주거나 혹은, 비디오 컨트롤러 영역을 숨기는


유휴시간을 체크해야 할 경우가 종종 있다.


위를 간단하게 구현해 줄 수 있는

모듈도 많고, 바닐라js(순수 자바스크립트)로 구현하는 방법도 다양하다.( jquery에서도 지원해준다.)


실무에서도 구현해본 적이 있었는데, 노드 모듈을 써서 해결을 하긴 했는데

자바스크립트 time관련 메서드(setTimeOut(), setInterval() ..)들이 특정한 ID값을 리턴해준다는 것을 몰라서 헤맸다.



개인 프로젝트 도중, 

일정시간이 지난 후, 컨트롤러 영역을 숨겨야 하는 기능이 필요했는데,

다른 사람들은 어떻게 하는지 한번 더 찾아봤다.



setInterval 메서드로도 해결할 수 있지만,

아래 방법이 깔끔해보여서 기록해둔다.

const LIMIT_IDLE_TIME = 3000;
let timeOut;
const resetTimeOut = () => {
clearTimeout(timeOut);
timeOut = setTimeout(() => {
setOpacity(videoControl, 0)
}, LIMIT_IDLE_TIME);
};
video.addEventListener('mousemove', () => {
setOpacity(videoControl, 0.5);
resetTimeOut();
});

(참고: https://src-bin.com/ko/q/a2fa3)