Stop delay on animation in JQuery

Refresh

December 2018

Views

145 time

3

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);

1 answers

4

Используйте функцию завершения в .load()которой будет сказать вам точно , когда $("#val1").load("cpu.php");закончил так:

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, я также сделал эти дополнительные изменения:

  1. Добавлена varсделать ваши переменные локальные переменные, а не неявные глобальные переменные.
  2. Я факторизовали parseInt()на высоте , так это только называется в одном месте , а не 4 -х мест.
  3. Я добавил параметр базисного на , parseInt()который всегда должен быть использован.
  4. Удалите дополнительную инициализацию переменной высоты, которая не нужна.

Я бы на самом деле предлагают различные реализации, что не запускается таймер для следующей итерации до последней итерации не будет сделано. Как вы уже сейчас, если ваш cpu.php вызов когда-либо занимает более 1 секунды, чтобы ответить, вы будете нагромождать несколько звонков все в полете сразу. Вместо этого, вы можете начать таймер следующей итерации, когда предыдущий закончен.

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();