JavaScript でユーザーのアイドル時間を検出するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript でユーザーのアイドル時間を検出するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-26 18:11:10

オリジナル

163 人が閲覧しました

How Can I Detect User Idle Time in JavaScript?

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

はじめに:

Web 開発におけるユーザーアクティビティの理解パフォーマンスを最適化し、より良いユーザーエクスペリエンスを提供するために重要です。非アクティブな期間または 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);
});

ログイン後にコピー

監視するイベントをカスタマイズすることで、次のことができます。特定のアプリケーションのニーズに合わせてアイドル時間の検出を調整します。

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