Detectar inatividade com JavaScript

Neste artigo você vai aprender a como detectar inatividade com JavaScript, utilizando a abordagem mais simples possível!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Para resolver o nosso problema vamos criar uma função

Esta função vai realizar um contador de tempo, que poderá executar uma ação ao chegar no tempo limite

Porém se houver alguma ação a partir do usuário, teremos um reset neste timer

Veja um exemplo prático do que foi explicado acima:

const inactivityTime = function () {

    let time;

    // reset timer
    window.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onkeydown = resetTimer;

    function doSomething() {
        // do something when user is inactive
    }

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(doSomething, 5000)
    }

};

Criamos a função inactivityTime que marca o tempo do usuário inativo

Qualquer ação por parte do usuário ativa resetTimer, que reseta o contador

Se houver 5 segundos de inatividade, teremos uma ação executada por doSomething

Esta função você deve substituir pelo que deseja executar no tempo de inatividade

Este tempo é definido no setTimeout da variável time

A função clearTimeout reseta o contador

Conclusão

Neste artigo você aprendeu a como detectar inatividade com JavaScript

Utilizamos a função setTimeout para definir o tempo de inatividade, quando acaba executamos uma função

A cada ação do usuário o timer é reiniciado

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!