setTimeout 的计时问题

Question

下面的代码演示了我遇到的问题。

当 js 执行时，进度条会像预期的那样快速填充，直到达到最大值。

然而，span#pbarval 容器更新非常缓慢，并且在进度条结束后完成 LONG。

$(document).ready(function () {
    var max= 20000,
        cur=0;
    function updatePBar(){
        cur++;
        jQuery("#pbar").val(cur);
        jQuery("#pbarval").html("" + Math.ceil(cur*100/max) + "%");
        if (cur<=max){
            setTimeout(updatePBar, 10);
        }
    }
    updatePBar();
});

你可以看到这里执行的代码：http://jsfiddle.net/EricBrian/fhtp6rpf/

有人可以解释这是为什么吗？如何让它跟上进度条？

另外，我注意到如果我切换标签页，setTimeout 似乎会暂停。在我切换回运行中的选项卡之前，百分比不会更新。

谢谢！ -e

Answer 1

您的进度条最大值为 100，但您的 javascript 变量最大值为 2000。

因此，进度条填充得更快，因为它会立即到达。

这个特定的表达是罪魁祸首：

Math.ceil(cur*100/max)

Answer 2

看起来下面的表达式花费的时间太长了。

Math.ceil(cur*100/max)

只需将该表达式替换为

cur

看看它飞得怎么样。

Answer 3

您使用 cur 作为进度条的值，因此当 cur === 100 时进度条已满，但您显示 cur*100/max 作为百分比在 cur == 20000 之前达到 100%。

您应该对两者使用相同的公式 cur*100/max，并且由于您想要更快的速度，您还应该将最大值除以 100：

http://jsfiddle.net/Paulpro/fhtp6rpf/2/

$(document).ready(function () {
    var max= 200,
        cur=0;
    function updatePBar(){
        cur++;
        jQuery("#pbar").val(cur*100/max);
        jQuery("#pbarval").html("" + Math.ceil(cur*100/max) + "%");
        if (cur<max){
            setTimeout(updatePBar, 10);
        }
    }
    updatePBar();
});

我还将测试 cur<=max 更改为 cur<max，因为你可能不想在 cur 已经达到 max 的情况下增加额外的时间。

Answer 4

只是你的cur

错了

$(document).ready(function () {
     var max= 20000,
         cur=0;

     function updatePBar(){
         cur++;
         var value = Math.ceil((cur/max) * 100);
         jQuery("#pbar").val(value);
         console.log(cur)
         jQuery("#pbarval").html("" + value + "%");
         if (cur<=max){
             setTimeout(function(){updatePBar();}, 10);
         }
     }
     updatePBar();
});

Answer 5

您为进度值和百分比指定了不同的值。

只需重复使用相同的值：

var max = 20000,
    cur = 0;
(function updatePBar() {
  pbarval.innerHTML = (pbar.value = Math.ceil(++cur * 100 / max)) + "%";
  if (cur < max) setTimeout(updatePBar, 10);
})();

<progress id="pbar" value="0" max="100"></progress>
<span id="pbarval"></span>

Answer 6

这是对你问题的一部分的回答。 setTimeout 设计为在选项卡处于活动状态时处于活动状态。 So the behavior regarding the progress bar not being updated when the tab is no active is normal.你可以用这个方法来克服这个here.

setTimeout 的计时问题

Timing issue with setTimeout

javascript

jquery

settimeout