JavaScript에서 유휴 시간 감지

소개:

웹 개발에서 사용자 활동 이해 성능을 최적화하고 더 나은 사용자 경험을 제공하는 데 매우 중요합니다. 비활성 기간 또는 낮은 CPU 사용량으로 정의되는 유휴 시간을 감지하면 콘텐츠 사전 로드 또는 사용자 인증과 같은 작업을 트리거하는 데 도움이 될 수 있습니다.

JavaScript 구현:

탐지하려면 JavaScript의 유휴 시간에는 다음과 같은 기본 JavaScript 접근 방식을 활용할 수 있습니다.

코드 조각:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.html'
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

사용법:

유휴 시간 감지를 초기화하려면 페이지가 로드된 후 inactivityTime() 함수를 호출하세요.

window.onload = function() {
  inactivityTime();
}

사용자 정의:

DOM 이벤트를 더 추가하여 사용자 활동을 모니터링할 수 있습니다. 가장 일반적으로 사용되는 이벤트는 다음과 같습니다.

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeydown = resetTimer;   // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments

더 나은 사용자 정의를 위해 배열을 사용하여 여러 이벤트를 등록할 수 있습니다.

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});

모니터링하는 이벤트를 사용자 정의하여 특정 애플리케이션의 요구 사항에 맞게 유휴 시간 감지를 맞춤화할 수 있습니다.