Evento de incêndio quando o usuário está inativo - CSS-Tricks

Veja as duas linhas comentadas abaixo, onde você pode inserir código para coisas a serem feitas quando o usuário fica ocioso e quando o usuário volta. Defina o período de inatividade na terceira linha, 1000 = 1 segundo.

idleTimer = null; idleState = false; idleWait = 2000; (function ($) ( $(document).ready(function () ( $('*').bind('mousemove keydown scroll', function () ( clearTimeout(idleTimer); if (idleState == true) ( // Reactivated event $("body").append("
Welcome Back.
"); ) idleState = false; idleTimer = setTimeout(function () ( // Idle Event $("body").append("
You've been idle for " + idleWait/1000 + " seconds.
"); idleState = true; ), idleWait); )); $("body").trigger("mousemove"); )); )) (jQuery)

Isso funciona usando uma função setTimeout para disparar no final dos segundos especificados. Se basicamente alguma coisa acontecer durante esse tempo (o mouse se move, a página é rolada ou uma tecla é pressionada), o período de tempo limite é redefinido.