Javascript 设置超时的计时问题

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

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

但是，span#pbarval容器的更新非常缓慢，并且在进度条完成后很长时间内完成

$(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();
});

$（文档）.ready（函数（）{
var最大值=20000，
cur=0；
函数updatePBar（）{
cur++；
jQuery（“#pbar”）.val（cur）；
jQuery（“#pbarval”）.html（“+Math.ceil（cur*100/max）+“%”）；
如果（cur进度条最大值为100，但javascript变量最大值为2000

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

这个特殊的表达就是对它的罪过：

Math.ceil(cur*100/max)

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

Math.ceil(cur*100/max) 

只需将该表达式替换为

cur

看看它是如何运行的。
您正在使用
cur
作为进度条的值，因此当
cur==100
时，进度条是满的，但您将
cur*100/max
显示为在
cur==20000
之前未达到
100%
的百分比

对于这两种情况，您应该使用相同的公式
cur*100/max
，并且由于您需要快速的速度，您还应该将最大速度除以100：


$（文档）.ready（函数（）{
var max=200，
cur=0；
函数updatePBar（）{
cur++；
jQuery（“#pbar”）.val（cur*100/max）；
jQuery（“#pbarval”）.html（“+Math.ceil（cur*100/max）+“%”）；
如果（cur你的
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();
});

$（文档）.ready（函数（）{
var最大值=20000，
cur=0；
函数updatePBar（）{
cur++；
var值=数学单元（（电流/最大值）*100）；
jQuery（“#pbar”）.val（值）；
console.log（cur）
jQuery（“#pbarval”）.html（“+value+”%）；
如果（cur您正在为进度值和百分比分配不同的值

只需重复使用相同的值：


var max=20000，
cur=0；
（函数updatePBar（）{
pbarval.innerHTML=（pbar.value=Math.ceil（++cur*100/max））+“%”；
如果（cur


这是对您部分问题的回答。setTimeout设计为在选项卡处于活动状态时处于活动状态。因此，当选项卡处于非活动状态时，进度条不被更新的行为是正常的。您可以使用此方法来解决此问题。
您正在除以
max
。注意，我跳过了
var pbarval=document.getElementById（'pbarval'），pbar=document.getElementById（'pbar'）；
为简单起见。这是标准但不好的做法。不要在生产代码中跳过它。
此外，我注意到，如果切换选项卡，设置超时似乎会暂停。在切换回它运行的选项卡之前，百分比不会更新。
$(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();
});