Evento de incendio cuando el usuario está inactivo - Trucos CSS

Vea las dos líneas comentadas a continuación, ahí es donde puede insertar código para las cosas que hacer cuando el usuario se queda inactivo y cuando el usuario regresa. Establezca el período de inactividad en la tercera línea, 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)

Esto funciona mediante el uso de una función setTimeout para disparar al final de los segundos especificados. Si básicamente sucede algo durante ese tiempo (el mouse se mueve, la página se desplaza o se presiona una tecla), el período de tiempo de espera se restablece.