php - 在 JQuery 中停止动画延迟

Question

我正在使用 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);

Answer 1

使用完成功能，.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 个地方被调用。
3. parseInt()我添加了应该始终使用的 radix 参数。
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();