如何让setTimout函数以相同的速度运行？

Question

前言:我在我的个人网站上有一个问题的演示(我希望这没关系.如果没有,我可以尝试在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次操作以填补空白; 在第四个中,我每5ms执行一次操作,总共50,000次操作填满了标准.

我的代码的哪一部分耗时最长,导致这些速度差异,并且可以改变它们以使它们看起来像它们那样起作用(第四个条形图获得较小的增量),但也以相同的速度运行？

Answer 1

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

另一个因素是，一旦超时触发，如果另一段代码已经在执行，则必须等待该代码完成，从而延迟执行。

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