Stop delay on animation in JQuery

Refresh	December 2018
Views	145 time

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

Steve

1 answers

Используйте функцию завершения в .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, я также сделал эти дополнительные изменения:

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

Я бы на самом деле предлагают различные реализации, что не запускается таймер для следующей итерации до последней итерации не будет сделано. Как вы уже сейчас, если ваш 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();

jfriend00

Related Issues

Last questions

Hot tags

javascript java c# python android php jquery c++ html ios css sql mysql .net c r asp.net ruby-on-rails objective-c arrays node.js sql-server iphone regex ruby angularjs json swift django linux asp.net-mvc xml wpf angular spring string ajax python-3.x git excel windows xcode multithreading pandas database reactjs bash scala algorithm eclipse html5 vba performance macos postgresql mongodb laravel oracle visual-studio list vb.net wordpress linq entity-framework winforms unit-testing matlab typescript image python-2.7 perl twitter-bootstrap numpy css3 qt swing hibernate c++11 shell apache amazon-web-services haskell maven forms azure facebook powershell rest function excel-vba delphi tsql ruby-on-rails-3 symfony google-chrome firebase api docker dataframe oop