Question

I have data grids on my webpage that need to be refreshed every few minutes. The data is queried from a mysql database using PHP when a Javascript timer expires. Once the data is imported it needs to be styled to make the problems easily visible, so I trigger another timer that will rollover every 2.5 seconds for a total of three times and then turn off. I came up with that solution because the data grids were not populated immediately, so running it after the queries with no delay caused it to miss most of the data.

Problems:
1) The biggest problem is if the webpage remains open in a browser when the computer goes to sleep, there are several empty alerts. Given how many people will be using this website at work, this behavior is totally unacceptable. I’m out of ideas.

2) I wish there was a better way to deal with the data upon import so I wouldn’t have to $(“td”).each() the entire page after a refresh. I am using components from the dhtmlx library, so it’s a little hard to crack open the functions and deal with this internally. Post-processing the data was all I could really do to make it work, but I’m open to ideas.

---

Variable declarations and initial timer settings:

//Set a timer to refresh all grid data every 4 minutes
var RefreshDataTimer = setInterval(timerMethod, 240000);
//Set an initial timer for the box coloring method
var RefreshBoxTimer  = setInterval(boxMethod, 3000);

Grid data refresh timer handler:

//Every 2.5 minutes this function will reload all of the grid data.
//It also triggers the boxMethod function.
function timerMethod() {
    $("#UpdateStatus_Div").fadeIn(300).delay(1000).fadeOut(300);
    RunStatusGrid.clearAndLoad("data/RunStatus.php");
    CmdlineGrid.clearAndLoad  ("data/CmdlineDataGet.php");
    Results0Grid.clearAndLoad ("data/Results0Data.php");
    Results1Grid.clearAndLoad ("data/Results1Data.php");
    Results2Grid.clearAndLoad ("data/Results2Data.php");
    Results3Grid.clearAndLoad ("data/Results3Data.php");
    RefreshBoxTimer = setInterval(boxMethod, 2500); 
}

Grid data styling timer handler:

//This function searches all of the grids for ERROR/FAIL/SKIP/WARN and changes 
//the cell background colors to clearly show where there are issues.
//It will only run 3 times because it is CPU intensive. The 2.5 second delay is because
//the clearAndLoad functions are run as background tasks and don't complete immediately.
var BoxCounter = 0;
function boxMethod() {
    BoxCounter++;
    if(BoxCounter >= 4) {
        BoxCounter = 0;
        clearInterval(RefreshBoxTimer);
    }

    $("td").each(function(index) {
        if( (this.innerHTML == "ERROR") || (this.innerHTML == "FAIL")) {
            this.style.backgroundColor = "red";
            this.style.fontWeight = "bold";
        } else if ( (this.innerHTML == "SKIP") || (this.innerHTML == "WARN") ) {
            this.style.backgroundColor = "yellow";
            this.style.fontWeight = "bold";
        }
    } );
}

Any help would be greatly appreciated.

Answer 1

Use setTimeout instead of setInterval, and reset the timer each time the callback is invoked.

The problem with setInterval is that if the computer is too busy doing other stuff the callbacks can end up getting “stacked up”, so they all fire at once.