JavaScript：如何控制進度速度？

有沒有增加和減少進度速度的選項？有時進步需要時間，有時非常非常緩慢地完成：JavaScript：如何控制進度速度？

var value = 0, 
    interval = setInterval(function(){ 
    value = ((+value) + .1).toFixed(1); 
    if(value == 80.5) clearInterval(interval); 
    $('p').html(value+'%'); 
},2);

http://jsfiddle.net/sweetmaanu/zjdBh/13/

來源

2013-05-21 Muhammed

只是增加了最後一個號碼，'2'在間隔結束？ – adeneo

@adeneo計數沒有結束，並且還顯示多個像這樣的數字99.561321654651615％:( – Muhammed

你會注意到，你的代碼是使用setInterval()。這個全局JavaScript函數用於在給定的時間間隔週期性地執行代碼。它的典型用法需要兩個參數（這是您在此使用的方式）。它會返回一個唯一的ID，用於識別您的特定間隔功能（因爲可以同時設置多個ID）。

第一個參數是要在間隔上執行的函數。您的功能是匿名功能：

function() { 
    value = ((+value) + .1).toFixed(1); 
    if (value == 80.5) clearInterval(interval); 
    $('p').html(value + '%'); 
}

此函數將增加每次執行的進度百分比。

第二個參數是一個毫秒數（千分之一秒）的整數，讓它在執行第一個參數前的函數之前消逝。我相信這是你問題的關鍵部分。你的代碼有2（在你的發佈代碼的最後一行），所以它在執行你的函數之前會等待2毫秒（這會增加百分比進度），然後它會等待2毫秒，然後再次執行相同的函數，等等

通過簡單地更改第二個參數的值，可以更改函數每次執行的速度或速度，這會更改您的百分比增加的速度或速度。因此，如果將其設置爲500，那麼setInterval將在每次執行該函數之前等待半秒。

您可以閱讀其他JavaScript定時器函數here，特別是約clearInterval()，您的代碼在匿名函數中使用該函數以在達到80.5%時結束間隔。

來源

2013-05-21 16:18:45 ajp15243

@ ajp14243最好的方法是使用'jQuery'或任何其他'JavaScript'是不是？ – Muhammed

如果你想增加或減少百分比級數，只需更改最後一行發佈代碼中的'2'，以匹配每次更新到百分比值所需的毫秒數。如果您的目標是增加一個百分比值，則不需要做任何其他更改百分比數到80.5％然後停止 – ajp15243

感謝您的幫助不幸的是，'2'速度不夠，有時:(你對我有沒有其他功能 – Muhammed

我希望這有助於：

$(function(){ 
    var value1 = 0; 
    var value2 = 0; 
    var span1 = $('#val1'); 
    var span2 = $('#val2'); 
    var interval1 = setInterval(function(){ 
     span1.text(++value1); 
     if (value1 === 80) { 
      clearInterval(interval1); 
      clearInterval(interval2); 
      interval1 = null; 
      interval2 = null; 
      span2.text(5); 
     } 
    }, 100); // you can change speed here 
    var interval2 = setInterval(function() { 
     span2.text(value2++ % 10); 
    }, 70); 
});

HTML：

<body> 
<div class="progress-bar"></div> 
<hr> 
<p><span id="val1">0</span>.<span id="val2">1</span>%</p> 
</body>

來源

2013-05-21 17:19:41 Ikrom

已經掛起這裏是我的工作樣本 http://jsfiddle.net/sweetmaanu/Ta8mR/3/ – Muhammed

不錯的工作:)我正在尋找這種解決方案。當'value1 === 95.5'時，我遇到了一個問題:( – Muhammed

@MhamhammedAthimannil只需使用'value1 === 95'，因爲'.5'被另一個'interval2'另存爲'span2.text（ 5）' – Ikrom

JavaScript：如何控制進度速度？

回答

相關問題