Intelligent Idle Detection With The Idleness JavaScript Library

Category: Javascript | December 4, 2023
Author:wstaeblein
Views Total:42 views
Official Page:Go to website
Last Update:December 4, 2023
License:MIT

Preview:

Intelligent Idle Detection With The Idleness JavaScript Library

Description:

Idleness is a lightweight and customizable idle detection library to detect when a user has gone idle or inactive on your site after a period of time.

It has no external dependencies, is configurable on-the-fly, can be started and stopped at will, and fires events you define when the idle state changes.  Helpful for use cases like:

  • Implementing an auto logout or session timeout warning when the user goes idle for too long
  • Automatically saving form data if the user walks away in the middle of filling something out
  • Detecting when a user is inactive to pause media or trigger screensavers
  • Gathering analytics on how much actual engagement your site content drives

How to use it:

1. Download the package and import the idleness.js script into the document.

<script src="./idleness.js"></script>

2. Initialize the Idleness and auto-start the idle detection on your page.

const idle = new idleness({
      // options here
}, true); // true = auto start

3. Available options.

const idle = new idleness({
      // in ms
      timeout: 900000, 
      throttle: 250, 
      // dispatch an event named 'idle'
      useEvent: true
}, true);

4. Trigger custom functions when the idle status changes:

const idle = new idleness({
      idleFn: handleIdle
}, true);
function handleIdle(status) { 
  if (status) {
    // do something
  } else {
    // do something
  }
  console.log('handleIdle: ' + status)
}

5. API methods.

// start/stop the idle dectection manually
idle.start();
idle.stop();
// elapsed time in ms
idle.elapsed;
// true if idel
idle.isIdle
// update options
idle.setConfigs({ 
  // options here
});

You Might Be Interested In:


Leave a Reply