jquery stop/start div refresh after x minutes

Question

I've written a small jQuery chatbox which loads a page in a div and refeshes every 4 seconds:

On click slide down and load page in div and refresh:

$('#toggle').click( function () { 
    $('#sbox').slideDown('fast');
    var refreshId = setInterval(function() {
        $('#shout').load('shout.php?randval='+ Math.random());
    }, 4000);
    return false;
});

This however I'm guessing is a bit of a resource drainer so thought how about after x minutes if no activity is detected stop refreshing but resume refreshing once there is activity again...

I found this snippet ... https://stackoverflow.com/a/7026769/1359310 ...which checks for activity (mouse movement) and looks perfect for my needs but can't seem to combine the two.

To summarize what I am after is on click load page in div and start refreshing, after x minutes if no activity stop refreshing, once activity is detected again start refreshing again.

Answer 1

Something like this should do it. You should be able to adapt it to your needs. I essentially copied the code from the SO question you linked. This adds an active/inactive class to the body. You will see this when you run my code. When the page is active the screen is blue. This indicates refreshing takes place. When the screen is gray then don't bother refreshing.

Then you just put a check for the active/inactive class in your code.

http://jsfiddle.net/scgEs/1

var refreshrate = 4000;
var inactivitytime = 15000;
var refreshid; //set to global scope so that you can clear it later
var activityTimeoutId; //store timeout for inactivity
$('#sbox').slideUp();

$('#toggle').click(function() {
    $('#sbox').slideDown('fast');
    refreshId = setInterval(function() {
        if ($('body.inactive').length == 1) {
            $('#sbox').append('<div>No refresh</div>');
        }
        else {
            console.log('Refreshing data');
            $('#sbox').append('<div>Refreshed...</div>');
            //$('#shout').load('shout.php?randval=' + Math.random());
        }
    }, refreshrate);
    return false;
});

// If theres no activity for X seconds do something
activityTimeoutId = setTimeout(inActive, inactivitytime);

function resetActive() {
    $(document.body).attr('class', 'active');
    clearTimeout(activityTimeoutId);
    activityTimeoutId = setTimeout(inActive, inactivitytime);
}

// No activity do something.


function inActive() {
    $(document.body).attr('class', 'inactive');
}

// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function() {
    resetActive()
});​

Answer 2

// If theres no activity for 2 minutes do something
var isActive = true;
var isRefreshing = false;
var refreshChatboxWait = 4000;
var activityTimoutWait = 120000;
var activityTimeout = setTimeout(inactive, activityTimoutWait);

function resetActive(){
    isActive = true;
    clearTimeout(activityTimeout);
    if ( ! isRefreshing ) {
        var refreshId = setInterval(refreshChatbox, refreshChatboxWait);
    }
    activityTimeout = setTimeout(inactive, activityTimoutWait);
}

// No activity do something.
function inactive(){
    isActive = false;
}

function refreshChatbox(){
    $('#shout').load('shout.php?randval='+ Math.random());
    if ( ! isActive ) {
        clearInterval(refreshId);
    }
}

// Check for mousemove, could add other events here such as checking for key presses ect.
$(document).bind('mousemove', function(){resetActive()});

$('#toggle').click( function () { 
    $('#sbox').slideDown('fast');
    if ( ! isRefreshing ) {
        var refreshId = setInterval(refreshChatbox, refreshChatboxWait);
    }
    return false;
});

Try that. :)