Web アプリケーションを最適化するために JavaScript でユーザーのアイドル時間を検出するにはどうすればよいですか?

JavaScript でのアイドル時間の検出

コンテンツのプリロードや非アクティブなユーザーのログアウトなど、Web アプリケーションのユーザー エクスペリエンスを最適化するには、アイドル時間の検出が不可欠です。 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) (スクロール可能な要素内のスクロールを処理するための改良版)

キャプチャ フェーズでのイベントの処理

キャプチャ フェーズ中にイベントが確実にキャッチされるようにするには、3 番目の引数を使用しますaddEventListener() で次のように記述します:

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

これらの手法を組み込むことで、JavaScript でアイドル時間を効果的に検出し、適切なアクションを実行できます。ユーザーエクスペリエンスを向上させるため。

以上がWeb アプリケーションを最適化するために JavaScript でユーザーのアイドル時間を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。