Your code can be easily refactored into something that makes a bit more sense, when you realized that all your need is two timers:
- Timer 1, say
refreshTimer, simply iteratively invokes itself to refresh the table
- Timer 2, say
idleTimer, checks how long the user has been idle. This timer is reset whenever a specific event is fired from the window object, as per your question's requirements
Basic timer settings
With that in mind, we can set up two global timers:
// Global timers
var refreshTimer = null,
idleTimer = null;
We can also store the timeouts somewhere, so that they don't clutter our functions with magic constants :) refreshDuration is the interval you want to call the refresh function, while idleDuration is the duration you use to determine if the user is inactive:
// Some settings
var refreshDuration = 5000, // You can change this!
idleDuration = 3000; // You can change this!
p/s: You have noted in your question that you wanted to wait for 15s (i.e. 15000ms), but for testing purposes I have reduced it.
The refresh timer: self-invoking function that refreshes content
To mimic a window.setInterval function for the freshTimer callback, we simply define a refresh() function, which within itself starts a new timeout and invokes itself again:
var refresh = function() {
$("body").append("<p>refreshTable every 5 second.</p>");
// Call itself
refreshTimer = window.setTimeout(refresh, refreshDuration);
};
The idle timer: checking for user (in)activity
For the idle timer, what you want to do is not to use window.onload to bind events. That is because this can only be run once, and if you have other window.onload statements on your page, you will risk overwriting them. Use .addEventListener instead. So, what we can do is store all the events you want to listen to in an array, and bind them iteratively using IIFE.
In each of these event callbacks, you want to clear both global timers, because:
- You want to cancel the self-invoking refresh function, and
- You want to restart the countdown towards a "user is idle" state
And then you simply restart the idleTimer in the same callback. The idleTimer will simply restart the self-invoking refresh function when it times out:
var idleClientCheck = function() {
// These events will trigger a new countdown
var events = ['load', 'mousemove', 'mousedown', 'click', 'scroll', 'keypress'];
for (var i = 0; i < events.length; i++) {
// Use IIFE to bind correct event on the fly
(function() {
var e = events[i];
window.addEventListener(e, function() {
// When these events are triggered, we cancel refreshTimer and idleTimer
window.clearTimeout(refreshTimer);
window.clearTimeout(idleTimer);
console.log('Refresh timer cancelled by ' + e + ', will restart in ' + idleDuration + 'ms');
// We restart idleTimer
// idleTimer simply fires refresh() when time runs out
idleTimer = window.setTimeout(refresh, idleDuration);
});
})(i);
}
};
idleClientCheck();
Combining all these at once, and you get a functional snippet:
// Global timers
var refreshTimer = null,
idleTimer = null;
// Some settings
var refreshDuration = 5000,
idleDuration = 3000;
// refresh() is simply a method with a self-invoking to mimic window.setInterval
var refresh = function() {
$("body").append("<p>refreshTable every 5 second.</p>");
// Call itself
refreshTimer = window.setTimeout(refresh, refreshDuration);
};
// idleClientCheck() runs its own timer to check for idle client
var idleClientCheck = function() {
// These events will trigger a new countdown
var events = ['load', 'mousemove', 'mousedown', 'click', 'scroll', 'keypress'];
for (var i = 0; i < events.length; i++) {
// Use IIFE to bind correct event on the fly
(function() {
var e = events[i];
window.addEventListener(e, function() {
// When these events are triggered, we cancel refreshTimer and idleTimer
window.clearTimeout(refreshTimer);
window.clearTimeout(idleTimer);
console.log('Refresh timer cancelled by ' + e + ', will restart in ' + idleDuration + 'ms');
// We restart idleTimer
// idleTimer simply fires refresh() when time runs out
idleTimer = window.setTimeout(refresh, idleDuration);
});
})(i);
}
};
idleClientCheck();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
