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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!