Javascript - Detecting "idle time"

by katalin_2003

HTML

<div id="msg"></div>

CSS

body {
  font-family: sans-serif;
}

JavaScript

setIdleTimeout(2000, function() {
  msg = document.getElementById("msg");
  // action when idle
  msg.innerHTML = "IDLE... (move your mouse or press a key)";
  console.log(msg.innerHTML);
}, function() {
  // action when the mouse moves or a key is pressed
  msg.innerHTML = "Welcome back!";
  console.log(msg.innerHTML);
});



function setIdleTimeout(millis, onIdle, onUnidle) {
  var timeout = 0;
  startTimer();

  function startTimer() {
    timeout = setTimeout(onExpires, millis);
    document.addEventListener("mousemove", onActivity);
    document.addEventListener("keypress", onActivity);
  }

  function onExpires() {
    timeout = 0;
    onIdle();
  }

  function onActivity() {
    if (timeout) {
      clearTimeout(timeout);
    } else {
      onUnidle();
    }
    //since the mouse is moving, we turn off our event hooks for 1 second
    document.removeEventListener("mousemove", onActivity);
    document.removeEventListener("keypress", onActivity);
    setTimeout(startTimer, 1000);
  }
}