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

你正在使用cur作為進度條的值，所以當cur === 100時進度條已滿，但你顯示cur*100/max為百分比，直到cur == 20000才達到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設計為在選項卡處於活動狀態時處於活動狀態。 因此，當選項卡未激活時，有關進度條的更新行為是正常的。 您可以使用此方法在此來這里 。

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

您要為進度值和百分比分配不同的值。

只需重用相同的值：

 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>