JavaScript는 어떻게 사용자 유휴 시간을 감지할 수 있습니까?

JavaScript에서 유휴 시간 감지

유휴 시간은 사용자가 활동하지 않거나 CPU를 사용하지 않는 기간으로 정의되며 다양한 목적으로 활용 가능 콘텐츠 프리페칭과 같은 것입니다. 이 기사에서는 JavaScript에서 유휴 시간을 식별하는 방법을 살펴봅니다.

바닐라 JavaScript 구현

한 가지 방법은 바닐라 JavaScript의 이벤트 기반 접근 방식을 활용하는 것입니다. 마우스 움직임, 키 입력 또는 스크롤과 같은 사용자 활동을 나타내는 DOM 이벤트에 대한 리스너를 등록하면 시스템은 사용자가 비활성 상태가 되는 시기를 감지할 수 있습니다.

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 함수를 초기화하면 JavaScript 스크립트가 시작됩니다. 사용자 활동을 듣고 있습니다. 지정된 시간 간격(예: 3000밀리초) 내에 이벤트가 트리거되지 않으면 로그아웃 함수가 호출되어 사용자 활동이 없음을 나타냅니다.

탐지 범위 확장

향상하려면 유휴 시간 감지, 추가 DOM 이벤트 등록이 가능합니다. 자주 사용되는 이벤트 포함:

• document.onload
• document.onmousemove
• document.onmousedown
• document.ontouchstart
• document.onclick
• document.onkeydown

의 경우 스크롤하는 동안 향상된 이벤트 처리를 통해 다음 코드를 사용할 수 있습니다.

document.addEventListener('scroll', resetTimer, true);

addEventListener에 전달된 true 매개변수는 이벤트가 버블 단계가 아닌 캡처 단계에서 캡처되도록 보장하여 스크롤 가능한 요소 내에서도 감지를 보장합니다. .

요약

JavaScript의 이벤트 기반 모델을 활용하면 개발자는 효과적으로 탐지할 수 있습니다. 사용자 유휴 시간. 이 기능은 콘텐츠 사전 로드, 전원 관리, 자동 로그아웃 메커니즘을 비롯한 다양한 시나리오에서 사용될 수 있습니다.

위 내용은 JavaScript는 어떻게 사용자 유휴 시간을 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!