How can I execute a setTimeout() only when the user is present (with the mouse movement) with jQuery

Question

I have a function that updates a <div /> via AJAX:

function update() {
    <!-- .ajax() --> 
    setTimeout(update(), 3000);}
}

What I need is that this is not executed when the user is not present on the website, so if there is no movement of the mouse (we will suppose that if move it is in the website) it will not update .mousemove(). By the way, there is any other thing that we can do to know is someone is active on the website?

How can this be done? Thank you in advance!

Edit: probably I explained bad. I need to know the way to only update when there is activity. Like Facebook does with his news feed, the front page. Thanks!

Answer 1

How about typing? .keypress()

Answer 2

You could use a mousemove handler to track when the user last moved, and then have the process only happen if they last moved the mouse within X seconds. But of course, if the user is sitting there reading something, or if they're a keyboard-oriented kind of person, that will tend to miss that they are there... So you'd probably want to look at keydown as well.

Here's a mousemove example:

jQuery(function($) {
    var count = 0, lastmove = new Date();

    $(document).mousemove(function() {
        ++count;
        lastmove = new Date();
        $('#display').html("Moved " + count + " times");
    });

});​

Then your update code could do this:

function update() {
    if (new Date() - lastmove < 60000) { // 60 seconds
        // Really do the update
    }
    else {
        // Check back in a few seconds
        setTimeout(update, 3000);
    }
}

Off-topic, but you have an error in your update code. You have:

setTimeout(update(), 3000);

...which will call update immediately and then try to use its return value to schedule something to happen in three seconds. If you want the call to update to be scheduled to happen in three seconds, leave off the () after it:

setTimeout(update, 3000);

Answer 3

var bUpdate = false;
function update() {

   if(bUpdate){
       ///perform your ajax request
   }
}

$(document).mousemove(function(){
    bUpdate = true;
    setTimeout(function(){bUpdate=false;}, 3000);}
});

Answer 4

I think there is no easy way to determine if the user is present

I would use a combination of mousemove, scroll, keypress.

Answer 5

I think I might have ended up with something such as this. Avoids date arithmetic. Only cares whether there's been some activity since the last update().

window.activeFlag = false;
window.updateDelay = 3000;

$(document).bind('mousemove scroll keydown', function(){ activeFlag = true; });

function update() {
  if(activeFlag) {
    doWork();
    activeFlag = false;
  }
}

window.setTimeout(update, updateDelay);

edit: I've discovered a flaw in the code. The following is more appropriate:

window.activeFlag = false;
window.updateDelay = 3000;

$(document).bind('mousemove scroll keydown', function(){ activeFlag = true; });

function update() {
  if(activeFlag) {
    doWork();
    activeFlag = false;
  }
  window.setTimeout(update, updateDelay);
}

update();