Executing Callbacks After An Idle Timeout with jQuery - Idle

Idle.js is a super light-weight jQuery plugin that tracks how long users interact with a web page and execute callback functions after a given idle timeout.

By default, the plugin listens for mousemove, keydown, mousedown and touchstart events to keep track of user activities.

The zip also includes a vanilla JavaScript version which allows you to implement the idle resetter on the web page without jQuery.

See also:

• jQuery Plugin To Display A Popup After Visitor Is Idle - Sleepy Head Modal

Installation:

# NPM
$ npm install jquery.idle --save

Basic usage:

1. Make sure to inlcude the jQuery idle.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.idle.js"></script>

2. Execute callbacks after 60 seconds idle.

$(document).idle({

  // on idle
  onIdle: function(){
    // do something
  },

  // after user back from idleness
  onActive: function(){
    // do something
  },

  // check window visibility
  onHide: function(){
    // do something
  },

  onShow: function(){
    // do something
  }
  
});

3. Change the default idle timeout.

$(document).idle({

  idle: 60000, //in ms
  
});

4. Add custom events that will trigger the idle resetter.

$(document).idle({

  events: 'mousemove keydown mousedown touchstart',
  
});

5. All default options and callbacks.

$(document).idle({

  //idle time in ms
  idle: 60000, 

  //events that will trigger the idle resetter
  events: 'mousemove keydown mousedown touchstart', 

  // executed after idle time
  onIdle: function () {}, 

  // executed after back from idleness
  onActive: function () {}, 

  // executed when window is hidden
  onHide: function () {},

  // executed when window is visible
  onShow: function () {}, 

  // set to false if you want to track only the first time
  keepTracking: true, 
  startAtIdle: false,
  recurIdleCall: false

});

Changelog:

2018-10-24

• v1.3.0

---

This awesome jQuery plugin is developed by kidh0. For more Advanced Usages, please check the demo page or visit the official website.