Executing Callbacks After An Idle Timeout with jQuery - Idle

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:

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.

  • Publication date: 24.10.2018
  • Source