javascript - 如何让我的 setTimeout 函数以相同的速度运行？

Question

前言:我有一个demo of the problem在我的个人网站上(我希望这没问题。如果不行，我可以尝试在 jsfiddle 上进行设置)。我想让这个问题变得有趣一些，同时也试图了解 javascript 中的时间函数。

我在超时时增加进度条的值。理想情况下(如果函数即时运行)它们应该以相同的速度填充，但在现实世界中，它们并非如此。代码是这样的:

function setProgress(bar, myPer) {
bar.progressbar({ value: myPer })
    .children('.ui-progressbar-value')
        .html(myPer.toPrecision(3) + '%')
            .attr('align', 'center');
    myPer++;
    if(myPer == 100) { myPer = 0; }
 }

 function moveProgress(bar, myPer, inc, delay){
    setProgress(bar, myPer);
    if(myPer >= 100) { myPer = 0; }
    setTimeout(function() { moveProgress(bar, myPer+inc, inc, delay); }, delay);
 }

 $(function() { 
   moveProgress($(".progressBar#bar1"), 0, 1, 500);
   moveProgress($(".progressBar#bar2"), 0, 1, 500);
   moveProgress($(".progressBar#bar3"), 0, .1, 50);
   moveProgress($(".progressBar#bar4"), 0, .01, 5);             
 });

天真地，人们会认为应该以相同的速度运行(填充进度条)。

但是，在前两个条中，(如果我们将“设置进度条”称为单个操作)我每 500 毫秒执行一个操作，总共 500 个操作来填充条；第三，我每 50 毫秒执行一次操作，总共 5,000 次操作来填充条形图；第四，我每 5 毫秒执行一次操作，总共 50,000 次操作来填充条。

我的代码的哪一部分花费的时间最长，导致了这些速度差异，并且可以进行更改以使它们看起来以它们所做的方式运行(第四个条的增量较小)，但也可以在速度一样吗？

Answer 1

将 setTimeout 用于此类事情的最大问题是您的代码执行发生在超时之间，并且未计入发送到 setTimeout 的值。如果您的延迟是 5 毫秒，而您的代码需要 5 毫秒来执行，那么您实际上是在加倍时间。

另一个因素是，一旦超时触发，如果另一段代码已经在执行，它将不得不等待它完成，从而延迟执行。

这与人们在尝试将 setTimeout 用于时钟或秒表时遇到的问题非常相似。解决方案是将当前时间与程序启动的时间进行比较，并据此计算时间。你可以做类似的事情。检查自开始以来已经过了多长时间，并据此设置 %。