jQuery Idleness Monitor

Take action when an element idles for too long.

by klenwell

HTML

<p>Please click this button at least once every 5 seconds.</p>
<button id="busy">Not Idling</button>
<h4 class="hidden reprimand">You have been idling for too long.</h4>

CSS

.reprimand {
  color: red;
}

JavaScript

function idleForMoreThan($el, ms) {
  var tooIdle = new jQuery.Deferred();
  
  var timesUp = setTimeout(function() {
    tooIdle.resolve($el);
  }, ms);
  
  $el.on('click change', function() {
    clearTimeout(timesUp);
    tooIdle.reject($el);
  });
  
  return tooIdle;
}

function relentlesslyMonitor($el, ms) {
  console.debug('monitoring', $el, 'for', ms, 'ms');
  var tooLong = idleForMoreThan($('button#busy'), ms);
  
  jQuery.when(tooLong).then(function($el) {
    console.debug("Caught idling!");
    $el.hide();
    $('.reprimand').show();
  })
  .fail(function() {
    console.debug("Hasn't been idle.");
    relentlesslyMonitor($el, ms);
  });
}

$(document).ready(function() {
  $('.hidden').hide();
  relentlesslyMonitor($('button#busy'), 5000);
});