웹 애플리케이션을 최적화하기 위해 JavaScript에서 사용자 유휴 시간을 어떻게 감지할 수 있습니까?

JavaScript의 유휴 시간 감지

콘텐츠 사전 로드, 비활성 사용자 로그아웃 등 웹 애플리케이션의 사용자 경험을 최적화하려면 유휴 시간 감지가 필수적입니다. JavaScript에서는 유휴 시간을 사용자가 활동하지 않는 기간 또는 최소한의 CPU 사용량으로 정의할 수 있습니다.

바닐라 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() 함수를 호출하여 페이지 로드 시와 같이 필요한 경우 유휴 시간 감지를 초기화합니다.

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

추가 DOM 이벤트 사용

탐지 정확도를 높이려면 더 많은 DOM 이벤트를 추가하여 사용자 상호 작용을 모니터링할 수 있습니다. 일반적으로 사용되는 일부 이벤트 포함:

• document.onload
• document.onmousemove
• document.onmousedown
• 문서. ontouchstart
• document.onclick
• document.onkeydown
• document.addEventListener('scroll', ResetTimer, true) (스크롤 가능한 요소 내부의 스크롤 처리를 위해 개선된 버전)

캡처 단계에서 이벤트 처리

캡처 단계에서 이벤트가 포착되도록 하려면 세 번째 인수를 사용하세요. addEventListener()에서 다음과 같이 합니다.

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

이러한 기술을 통합하면 이벤트의 유휴 시간을 효과적으로 감지할 수 있습니다. JavaScript를 사용하고 사용자 경험을 향상시키기 위해 적절한 조치를 취하십시오.

위 내용은 웹 애플리케이션을 최적화하기 위해 JavaScript에서 사용자 유휴 시간을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!