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

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

你应该对两者使用相同的公式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 2

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

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

这个特殊的表达是有罪的：

Math.ceil(cur*100/max)

Answer 3

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

Math.ceil(cur*100/max)

只需用

替换该表达式

cur

看看它过得怎么样。

Answer 4

这是对部分问题的回答。 setTimeout设计为在选项卡处于活动状态时处于活动状态。因此，当选项卡未激活时，有关进度条的更新行为是正常的。您可以使用此方法here完成此操作。

Answer 5

你的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 6

您正在为进度值和百分比分配不同的值。

只需重复使用相同的值：

＆＃13;

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

＆＃13;

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

＆＃13;

setTimeout的计时问题

6 个答案: