如何偵測 JavaScript 中的空閒時間以優化內容載入？

偵測JavaScript 中的空閒時間以最佳化內容載入

在JavaScript 領域，偵測空閒時間對於實現預取等功能至關重要並預先載入內容以增強使用者體驗。在本文中，我們探討了偵測使用者何時空閒的方法，這表明缺乏 CPU 使用率或使用者互動。

Vanilla JavaScript 解決方案

要實現這一點，我們可以透過以下方法使用普通JavaScript：

var inactivityTime = function () {
    var time;
    // Reset inactivity timer on page load and DOM events
    window.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function logout() {
        // Log out or perform any desired action upon idle time
        alert("You are now logged out.")
    }

    function resetTimer() {
        // Clear the timeout and set a new one for the idle time period
        clearTimeout(time);
        time = setTimeout(logout, 3000);
    }
};

定義此函數後，您可以在必要時初始化它（例如，在頁面載入時）：

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

用於提高精確度的其他DOM 事件

要最佳化空閒時間偵測，您可以包含更多指示使用者的DOM 事件活動。以下是常用的事件：

document.onload
document.onmousemove
document.onmousedown
document.ontouchstart
document.onclick
document.onkeydown

也可以使用陣列來註冊多個事件：

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

滾動事件的注意事項

請注意，window.onscroll 不會偵測可捲動元素內的捲動。要解決這個問題，請使用 window.addEventListener('scroll', resetTimer, true) 並將第三個參數設為 true。

透過這些技術，您可以準確地偵測 JavaScript 中的空閒時間，從而優化內容載入改善使用者體驗的策略。

以上是如何偵測 JavaScript 中的空閒時間以優化內容載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！