Only update messages when there is a connection

Question

I built a site display messages, so the msgloader.js updates the messages every 10 seconds from admin. The client displays this site on a screen constantly.

The problem is that sometimes the internet connection is not so good, the display got disconnected and the msgloader.js still updates the messages, in the end the screen freeze (the reason I know is that there is a clock on the site as well, the clock gets time from the local machine, it simply freeze at a time until we refresh the page which is an issue).

I suspect this freeze issue is because there is too much script running and the machine ram has been taken up.

BACK TO THE QUESTION, Is there any way we can set the below code into update messages every 10 seconds when there is an internet connection, otherwise update messages every hour/two when there is no internet connection.

Any help is appreciated. Thanks.

--------------------------------------------------------------------
Update the data for the static sections
--------------------------------------------------------------------
*/
function updateSection(sect) 
{   
    setTimeout('updateSection(' + sect + ')', 10000);

    //alert('updateSection: ' + sect);
    var ajax = new sack();
    ajax.requestFile = 'ajax/getMessages.php?section='+sect;
    ajax.method = 'post';
    /*ajax.onError = whenError;*/
    ajax.onCompletion = whenComplete;
    ajax.runAJAX();

/*  function whenError() 
    {
        alert('Could not return getMessages values. <br />Please notify the system administrator.');
    }*/

    function whenComplete() 
    {
        var messages = ajax.response;

        var messages1 = messages.split('---');

        var num_messages    = messages1[0];
        //alert('Num Lines: ' + num_messages );
        var messages_list   = messages1[1];
        //alert('MESSAGES: '+messages);
        var msg_data_array  = messages_list.split('::');

        var i=0;            
        switch(sect)
        {
            case 1:

                for(i=0;i<=num_messages;i++)
                {

                    var j = i + 1;
                    icon_to_use = 'icon'+j;

                    // Set icon class
                    var icon = document.getElementById('icon_' + sect + '_' + j);
                    icon_to_use.className = 'icon_pointer';

                    // Set message text
                    // -------------------------------------------                  
                    var msgtext_array = msg_data_array[i].split('##');


                    // Here's the title
                    // -------------------------------------------
                    var msgtext_1a = msgtext_array[1];


                    // Here's the text
                    // -------------------------------------------
                    var msgtext_1 = msgtext_array[2];

                    // Set the title space
                    // -------------------------------------------
                    var msg_1a = document.getElementById('msg_text_' + sect + '_' + j + 'a');

                    // Set the text space
                    // -------------------------------------------
                    var msg_1 = document.getElementById('msg_text_' + sect + '_' + j);

                    // Write in the title
                    // -------------------------------------------                      
                    msg_1a.innerHTML = msgtext_1a;
                     msg_1.innerHTML = "<img src='[url_of_image]' /> " + msgtext_1;
                    // Write in the text
                    // -------------------------------------------                      
                    msg_1.innerHTML = (msgtext_1) ? separator + msgtext_1 : msgtext_1;

                    //msg_1a.style.borderBottom="2px solid white";
                    msg_1a.style.borderBottom="2px solid white";
                    msg_1.style.borderBottom="2px solid white";

                }   break;
            default:
                break;          
        }

        // DEBUG
        if(debug)
        {
            debugReport
            (
                'updateSection():ID: '+msg_id+
                '<br />'+'updateSection():TIMEOUT: '+timeout+
                '<br />'+'ROTATE: '+rotate
            );
        } 
        else 
        {
            debugReset();
        }
    }
}
/*

Answer 1

If I'm understanding you correctly you could do something like this:

every time onerror event happens on an ajax request increment a counter. After a set limit of fails in a row / fails in an amount of time you change the length of the time-out.

var timeoutLength = 10000
setTimeout('updateSection(' + sect + ')', timeoutLength);

changing the timeoutLength once the ajax requests are failing, IE there is not internet connection.

EDIT

var errorCount = 0;

ajax.onError = whenError;

function whenError() {
  errorCount++
  if(errorCount < 5) {
    timeoutLength = 3600000
  }
}


function whenComplete() {
   errorCount = 0
   ...
}

This requires 5 errors in a row to assume that the internet is down. You should probably play around with that. But this should show you the general idea.

Answer 2

Try to use this,

var online = navigator.onLine;

and now you can do like this,

if(online){
    alert('Connection is good');
}
else{
    alert('There is no internet connection');
}

UPDATE:

Try to put the alert here,

if(online){
    setTimeout('updateSection(' + sect + ')', 10000);

    //alert('updateSection: ' + sect);
    var ajax = new sack();
    ajax.requestFile = 'ajax/getMessages.php?section=1';
    ajax.method = 'post';
    /*ajax.onError = whenError;*/
    ajax.onCompletion = whenComplete;
    ajax.runAJAX();
}
else{
    alert('There is no internet connection');
}