首頁 > web前端 > js教程 > 如何在 JavaScript 中偵測使用者空閒時間?

如何在 JavaScript 中偵測使用者空閒時間?

Patricia Arquette
發布: 2024-12-26 18:11:10
原創
162 人瀏覽過

How Can I Detect User Idle Time in JavaScript?

偵測JavaScript 中的空閒時間

簡介:

簡介:

在Web 開發中,了解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
    }
};
登入後複製

程式碼片段:

用法:
window.onload = function() {
  inactivityTime();
}
登入後複製

要初始化空閒時間偵測,請在頁結束時偵測,請在頁結束後呼叫inactivityTime()函數已載入:

自訂:
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
登入後複製

您可以新增更多 DOM 事件來監視使用者活動。一些最常用的事件是:
window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true);
});
登入後複製

為了更好的自訂,您可以使用陣列來註冊多個事件:透過自訂您監控的事件,您可以自訂空閒時間檢測以滿足您特定應用程式的需求。

以上是如何在 JavaScript 中偵測使用者空閒時間?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板