I have a website which I would like to auto refresh ONLY if user is not using it for a specific time (ie.180 sec).Is there a way to auto refresh HTML only if there has been no activity on a page?

Thank you!

I have a website which I would like to auto refresh ONLY if user is not using it for a specific time (ie.180 sec).Is there a way to auto refresh HTML only if there has been no activity on a page?

Thank you!

• javascript
• refresh

• Define activity. Is it mouse movement (hover)? Is it scrolling the page? Is it walking through the tabindex of form elements and links using the tab key? – cherouvim Commented Dec 31, 2010 at 10:37

4 Answers 4

Two approaches:

1. Use a once-a-second timer and a "timeout" value.

You probably want to wrap this up in an object:

var activityHandler = (function() {
    var timerHandle = 0,
        timeout;

    flagActivity();

    function start() {
        stop();
        flagActivity();
        timerHandle = setInterval(tick, 1000);
    }

    function stop() {
        if (timerHandle != 0) {
            clearInterval(timerHandle);
            timerHandle = 0;
        }
    }

    function flagActivity() {
        timeout = new Date() + 180000;
    }

    function tick() {
        if (new Date() > timeout) {
            stop();
            location.reload();
        }
    }

    return {
        start:        start,
        stop:         stop,
        flagActivity: flagActivity
    };
})();

Then start it on page load:

activityHandler.start();

And ping it every time you see "activity":

activityHandler.flagActivity();

So for instance, you might do this:

if (document.addEventListener) {
    document.addEventListener('mousemove', activityHandler.flagActivity, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', activityHandler.flagActivity);
}
else {
    document.onmousemove = activityHandler.flagActivity;
}

2. Use a timer you reset every time there's "activity".

This is less ongoing work (we don't have something happening every second), but more work when you flag that activity has happened.

Set up a timer to do the refresh:

var handle = setTimeout(function() {
    location.reload();
}, 180000);

...and then cancel and reschedule any time you see whatever you consider to be "activity":

clearTimeout(handle);
handle = setTimeout(...);

You can wrap this up in a function:

var inactivityTimerReset = (function() {
    var handle = 0;

    function reset() {
        if (handle != 0) {
            clearTimeout(handle);
        }
        handle = setTimeout(tick, 180000);
    }

    function tick() {
        location.reload();
    }

    return reset;
})();

// Kick start
inactivityTimerReset();

// ...and anywhere you see what you consider to be activity, call it
// again
inactivityTimerReset();

Then, again, ping it on every activity. But this is a lot more work than I'd put in a mousemove handler, hence solution #1 above.

var docTimeOut;
function bodyTimeOut()
{
    docTimeOut=setTimeout(function(){location.reload();},18000);
}

function resetTimeOut()
{
    clearTimeout(docTimeOut);
    bodyTimeOut();
}


document.onload = bodyTimeOut;

document.body.onmouseover= resetTimeOut;

you could declare a variable pageActive or something, set it to false, and whenever user does something set it to true. Then, set a function to execute periodically as frequently as you want with setinterval() that checks this variable, if it's true set it to false to start again, if is false then refresh page.

You can use onblur and onfocus on body element to see if there is a kind of activity on your page.