update a page only when there are no mouse events


I would like to update the page only when there are no mouse events, Such as:

function TimedRefresh(t) {
    $('#colorbox').mousemove(event) {
        if (mousemove != 0) { //(mousemove == false)
            setTimeout("location.reload(false);", t);
        }
    }
}

It of course does not work. It's called by:

<body onload="JavaScript:TimedRefresh(5000);">

You'd do that like this

$('#colorbox').mousemove(function( event ) {

    clearTimeout( $(this).data('timer') );

    $(this).data('timer', setTimeout(function() {
        window.location.reload();
    }, 5000));
});

When the mouse moves within the #colorbox element, the timer is reset, and if no mouse movement is detected, it reloads the page in 5 seconds.

FIDDLE


You need to reverse the logic. Set the timer onload of the page and then clear/restart it when the mouse is moved. If the mouse is not moved for longer than 5 seconds, then the page will refresh:

$(document).ready(function() {
    var timer;
    resetTimer();

    $('#colorbox').mousemove(function() {
        resetTimer(timer);
    });

    function resetTimer() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            window.location.reload(false);
        }, 5000);
    }
});

Working example


I think you should do something likes this:

  1. Create a hidden field with a default value (maybe 0).
  2. When some MouseEvent is triggered then yo should change the value of the hidden field (maybe 1)
  3. Then, for other side I think you could use a function like setTimeout for comparing and refresing your page. Here you can read more about this function