I'm developing a "real-time" web application which sends AJAX requests to the server every 10 seconds. Obviously this is very bandwidth-intensive and I would like to know if there's any solution to this.
My idea is checking if the user doesn't move his mouse for X seconds. How can I accomplish this?
$(document). ready(function(){ idleTime = 0; //Increment the idle time counter every second. var idleInterval = setInterval(timerIncrement, 1000); function timerIncrement() { idleTime++; if (idleTime > 2) { doPreload(); } } //Zero the idle timer on mouse movement. $(this).
We can actually detect the idle user with the help of DOM events: keyboard events and mouse events. For React applications, we can use the react-idle-timer library. It's always good to let the user know with the modal popup that he/she has been idle before logging them out.
The idle time is the time that the user doesn't interact with a web-page. This interaction can be either moving the mouse, clicking on the page or using the keyboard. This time can be detected to execute certain events that may need to occur after a certain period of idle time.
You may want to listen for some or all of the following events:
mouseMove, mouseClick, mouseUp, mouseDown, keyDown, keyUp, keyPress
set a timer to go off after some duration of idleness (60 seconds?) and that will turn off your switch make sure you check your switch before your ajax requests.
Ideally you'll exponentially throttle your ajax calls to some low value the longer a user remains idle.
$(window).bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', someEvent);
var active = true,
delay = 60000,
timer = null;
function someEvent(e)
{
active = true;
if (timer) clearTimeout(timer);
timer = setTimeout(function(t){
active = false;
}, delay);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With