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);
});

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