Question

I am working on this CPU monitor using PHP and JQuery – http://nereus.rikkuness.net/admin/cpu2.php

It’s working exactly as I intend it to work with one slight problem. Due to the command used which polls the current CPU usage there is a delay from the JQuery calling for a value update and the update actually arriving of 1 second. The knock-on effect of this is that when the bar animates it’s always a second behind because the first time it tries to resize it still hasn’t received the new value and so resizes itself based on the last value it received.

Can anyone think of any way in which I can get it to animate as soon as the value updates, regardless of when the value is actually received?

Thanks guys, you’re the best! 🙂

Code is as follows if you don’t want to view source on the live page:

var auto_refresh = setInterval(
    function(){
        height = 100;
        $("#val1").load("cpu.php");
        cpuUsage = $("#val1").html();
        height = cpuUsage * 10;
        barColor = "";

        if(parseInt(height) < 500){
            barColor = "green";
        }else if(parseInt(height) > 800){
            barColor = "red";
        }else{
            barColor = "#febf01";
        }

        $("#val2").animate({
            width: parseInt(height),
            backgroundColor: barColor
        })
}, 1000);

Answer 1

Use the completion function in .load() which will tell you exactly when $("#val1").load("cpu.php"); has completed like this:

var auto_refresh = setInterval(
    function(){
        $("#val1").load("cpu.php", function() {
            var cpuUsage = $("#val1").html();
            var height = parseInt(cpuUsage * 10, 10);
            var barColor = "";

            if(height < 500){
                barColor = "green";
            }else if(height > 800){
                barColor = "red";
            }else{
                barColor = "#febf01";
            }

            $("#val2").animate({
                width: height,
                backgroundColor: barColor
            })
        });
}, 1000);

FYI, I also made these additional changes:

1. Added var to make your variables be local variables, not implicit global variables.
2. I factored out the parseInt() on the height so it is only called in one place instead of 4 places.
3. I added the radix parameter on the parseInt() which should always be used.
4. Remove the extra initialization of the height variable which is not needed.

---

I would actually suggest a different implementation that doesn’t start a timer for the next iteration until the last iteration is done. As you have it now, if your cpu.php call ever takes more than 1 second to respond, you will pile up multiple calls all in flight at once. Instead, you can start the next iteration’s timer when the previous one finished.

var usageTimer;
var usageContinue = false;

function stopUsage() {
    clearTimeout(usageTimer);
    usageContinue = false;
}

// getUsage runs continuously until stopUsage is called
function getUsage() {
    var start = new Date().getTime();
    $("#val1").load("cpu.php", function() {
        if (usageContinue) {
            var cpuUsage = $("#val1").html();
            var height = parseInt(cpuUsage * 10, 10);
            var barColor = "";

            if(height < 500){
                barColor = "green";
            }else if(height > 800){
                barColor = "red";
            }else{
                barColor = "#febf01";
            }

            $("#val2").animate({
                width: height,
                backgroundColor: barColor
            })
            // start the next no sooner than 1 second from when the last one was started
            var end = new Date().getTime();
            // if the .load() call already took more than a second, then just start the next one now
            if (end - start > 1000) {
                getUsage();
            } else {
                // otherwise, start the next one 1 second after the previous one was started (to try to get one every second)
                usageTimer = setTimeout(getUsage, end - start);
            }
        }
    });
}
getUsage();