3

PHP と JQuery を使用してこの CPU モニターに取り組んでいます - http://nereus.rikkuness.net/admin/cpu2.php

1つの小さな問題で動作するように意図したとおりに動作しています。現在の CPU 使用率をポーリングするコマンドが使用されているため、値の更新を要求する JQuery からの遅延と、実際に更新が到着するまでに 1 秒の遅延があります。これの連鎖反応は、バーが最初にサイズ変更を試みたときにまだ新しい値を受け取っておらず、最後に受け取った値に基づいてサイズを変更するため、バーがアニメーション化するときに常に 1 秒遅れることです。

値が実際にいつ受信されたかに関係なく、値が更新されるとすぐにアニメーション化できる方法を誰かが考えられますか?

みんなありがとう、あなたは最高です！:)

ライブ ページでソースを表示したくない場合のコードは次のとおりです。

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

1 に答える 1

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

参考までに、次の追加の変更も行いました。

  1. var変数を暗黙のグローバル変数ではなくローカル変数にするために追加されました。
  2. 高さを考慮したparseInt()ので、4か所ではなく1か所でしか呼び出されません。
  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();
于 2012-12-18T23:18:28.830 に答える