• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / JavaScript Idle Detection

JavaScript Idle Detection

Last updated on September 10, 2018 by Sal Ferrarello


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Recently, I needed to determine when a website visitor was idle for a certain amount of time. I thought this was an interesting problem and wanted to spend a little more time with JavaScript so I wrote some code for it. Since we are monitoring idle time and I’m a big fan of the quote

Idle hands are the Devil’s Playground.

I called it “Devil’s Playground”.

Here is a copy of the JavaScript code, which is also available on GitHub at github.com/salcode/devils-playground.

/**
* Devils Playground.
* JavaScript Idle Detection
* Version: 0.2.0
* License: apache-2.0
* Project URL: https://github.com/salcode/devils-playground
* Author: Sal Ferrarello
* Author URL: https://salferrarello.com
*
* Usage:
*
* var idle = new DevilsPlayground(
* function() {
* alert('You have been idle for 42 seconds!');
* },
* 42,
* {
* 'devMode': false, // console.log() counter.
* }
* );
* idle.start();
*/
'use strict';
/**
* Constructor.
*
* @param function idleFunction The function to execute after the number of
* idle seconds pass.
* @param int maxNumSeconds (optional) The maximum number of idle seconds
* before the function is executed. Defaults
* to 120 seconds (2 minutes).
* @param object options (optional)
* - bool devMode If the current counter and calls to reset
* should be displayed in the JavaScript
* console. Defaultsthe version I grew up hearing was "Devil's Playground".
*/
function DevilsPlayground(idleFunction, maxNumSeconds = 120, options = {} ) {
this.idleFunction = idleFunction;
this.maxNumSeconds = maxNumSeconds;
this.secondCounter = 1;
this.devMode = options.devMode || false;
this.addListeners();
}
/**
* Start timer.
*
* Reset counter and start counting.
*/
DevilsPlayground.prototype.start = function() {
this.stop();
this.reset();
this.continue();
};
/**
* Stop timer.
*/
DevilsPlayground.prototype.stop = function() {
clearTimeout(this.timer);
};
/**
* Reset the second counter.
*/
DevilsPlayground.prototype.reset = function() {
if(this.devMode) { console.log('reset'); }
this.secondCounter = 1;
};
/**
* Continue timer.
*
* Set the next tick to occur after delay.
*/
DevilsPlayground.prototype.continue = function() {
var self = this;
this.timer = setTimeout(function() {
self.tick();
}, 1000);
};
/**
* Record time that has passed.
*/
DevilsPlayground.prototype.tick = function() {
if(this.devMode) { console.log(this.secondCounter); }
if (this.isSecondCounterMax()) {
this.idleFunction();
return;
}
this.secondCounter++;
this.continue();
};
/**
* Have we reached the maximum number of seconds?
*
* @return bool We are at the maximum number of seconds.
*/
DevilsPlayground.prototype.isSecondCounterMax = function() {
return this.secondCounter >= this.maxNumSeconds;
};
/**
* Assign listeners to note behavior that is not idle.
*/
DevilsPlayground.prototype.addListeners = function() {
var self = this,
options = this.isPassiveSupported() ? { passive: true } : false;
document.addEventListener("mousemove", self.reset, options);
document.addEventListener("mousedown", self.reset, options);
document.addEventListener("keypress", self.reset, options);
document.addEventListener("DOMMouseScroll", self.reset, options);
document.addEventListener("mousewheel", self.reset, options);
document.addEventListener("touchmove", self.reset, options);
document.addEventListener("MSPointerMove", self.reset, options);
};
/**
* Is the options object supported for addEventListener in this browser?
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
* @return bool The options object is supported in this browser.
*/
DevilsPlayground.prototype.isPassiveSupported = function() {
var passiveSupported = false;
try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
}
});
window.addEventListener("test", options, options);
window.removeEventListener("test", options, options);
} catch(err) {
passiveSupported = false;
}
return passiveSupported;
}
view raw devils-playground.js hosted with ❤ by GitHub
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Computing, Draft, Programming Tagged With: JavaScript, website

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in