停止JQuery动画的延迟

Question

停止JQuery动画的延迟

3

我正在使用PHP和JQuery制作这个CPU监视器-http://nereus.rikkuness.net/admin/cpu2.php。

它的工作方式与我想要的完全相同，但有一个小问题。由于使用的命令轮询当前CPU使用情况，因此在JQuery调用值更新并实际更新之间存在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);

- Steve

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

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

顺带一提，我还做了以下额外的更改：

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