Detectando tempo ocioso em JavaScript

Introdução:

No desenvolvimento web, entendendo a atividade do usuário é crucial para otimizar o desempenho e fornecer uma melhor experiência ao usuário. A detecção do tempo ocioso, definido como um período de inatividade ou baixo uso da CPU, pode ajudá-lo a acionar ações como pré-carregamento de conteúdo ou autenticação do usuário.

Implementação de JavaScript:

Para detectar tempo ocioso em JavaScript, você pode utilizar a seguinte abordagem JavaScript básica:

Snippet de código:

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

Uso:

Para inicializar a detecção de tempo ocioso, chame a função inactivityTime() após o carregamento da página:

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

Personalização:

Você pode adicionar mais eventos DOM para monitorar a atividade do usuário. Alguns dos eventos mais comumente usados ​​são:

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

Para melhor personalização, você pode usar um array para registrar vários eventos:

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

Ao personalizar os eventos que você monitora, você pode adaptar a detecção de tempo ocioso para atender às necessidades específicas do seu aplicativo.