Stop redundant refreshes : JQuery

Question

I have many websites running my shoutbox script, but there is a problem here:

This shoutbox refreshes itself each 10 seconds , and consider what if it happens on a crowded website!

It gives javascript error sometimes to some users

$(document).ready(function(){
updateShoutbox();
var auto_refresh = setInterval(
function ()
{
updateShoutbox();
}, 10000);

Changing the time period is one option , the other is improving the server resources . but I have a thesis here:

What if there is a way to smart up this thing as it could stop refreshing while the user is disconnected or not focused on the website window ?

I am looking for a way to condition the shoutbox refresh to only when the website window is focused and internet connecton is alive .

Thanks for the help.

Answer 1

In a small search I found this javascript implementation that detects when the user is idle or away.

Example:

var auto_refresh = null;
$(function(){

    setIdleTimeout(2000); // 2 seconds
    setAwayTimeout(4000); // 4 seconds

    document.onIdle = function() { /* something on idle if you want */ }
    document.onAway = function() { if(auto_refresh != null) clearInterval(auto_refresh); }
    document.onBack = function(isIdle, isAway) { auto_refresh = setInterval("updateShoutbox();", 10000); }

    updateShoutbox();
    document.onBack();
});

You can stop sending ajax requests when the user is away using this implementation.

---

Answering the comment:

OK, but I thought the more relevant part to the question asked is how this library works and what it detects and I thought expounding upon that would make a more useful answer. If I was the OP, I'd want to know how does it detect onIdle and onAway and onBack and are those even relevant to my problem? – jfriend00

jfriend00, it tracks the interactive events in the document, using jQuery or prototype api:

function _initJQuery()
{
    _api = _API_JQUERY;
    var doc = $(document);
    doc.ready(function(){
            doc.mousemove(_active);
            try {
                doc.mouseenter(_active);
            } catch (err) { }
            try {
                doc.scroll(_active);
            } catch (err) { }
            try {
                doc.keydown(_active);
            } catch (err) { }
            try {
                doc.click(_active);
            } catch (err) { }
            try {
                doc.dblclick(_active);
            } catch (err) { }
        });
}

function _initPrototype()
{
    _api = _API_PROTOTYPE;
    var doc = $(document);
    Event.observe (window, 'load', function(event) {
        Event.observe(window, 'click', _active);
        Event.observe(window, 'mousemove', _active);
        Event.observe(window, 'mouseenter', _active);
        Event.observe(window, 'scroll', _active);
        Event.observe(window, 'keydown', _active);
        Event.observe(window, 'click', _active);
        Event.observe(window, 'dblclick', _active);
    });
}

// Detect the API
try {
    if (Prototype) _initPrototype();
} catch (err) { }

try {
    if (jQuery) _initJQuery();
} catch (err) { }

Then it use timeouts to track when the user didn't interact with the page, basically, if the user interact before the timeout is executed, then the function clear the timeout and start it again, so it's only executed when the user don't interact with the page:

function setIdleTimeout(ms)
{
    _idleTimeout = ms;
    _idleTimestamp = new Date().getTime() + ms;
    if (_idleTimer != null) {
    clearTimeout (_idleTimer);
    }
    _idleTimer = setTimeout(_makeIdle, ms + 50);
    //console.log('idle in ' + ms + ', tid = ' + _idleTimer);
}

When the user get back, it interact with the page, detect that he was away or idle by a flag, if he was away then he executes the onBack and start the setTimeout again

function _active(event)
{
    var t = new Date().getTime();
    _idleTimestamp = t + _idleTimeout;
    _awayTimestamp = t + _awayTimeout;
    //console.log('not idle.');

    if (_idleNow) {
    setIdleTimeout(_idleTimeout);
    }

    if (_awayNow) {
    setAwayTimeout(_awayTimeout);
    }

    try {
    //console.log('** BACK **');
    if ((_idleNow || _awayNow) && document.onBack) document.onBack(_idleNow, _awayNow);
    } catch (err) {
    }

    _idleNow = false;
    _awayNow = false;
}