如何確保兩個setInterval持續同一時間

Question

我有一個簡單的JS動畫進度條。每20ms，進度條的值增加0.25。所以需要20 * 4 * 100ms = 8秒才能完成進度條，如下面的JSFiddle所示。

function updateProgress(currentValue, expectedValue){ 
 
    var inProgress = setInterval(function() { 
 
     currentValue = currentValue + 0.25; 
 
     $('#progress-bar').attr('value', currentValue); 
 
     $('#progress-text').text(Math.round(currentValue)); 
 
     if (currentValue == expectedValue) clearInterval(inProgress); 
 
    }, 20); 
 
    } 
 

 

 
updateProgress(0, 100);

<progress id="progress-bar" value="0" max="100"></progress> 
 
<div><span id="progress-text">0</span>%</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

所以，如果我採取相同的代碼，並開始在50％而不是0％的進度條，這將需要20 * 4 * 50毫秒= 4秒完成進度條，正如你可以在下面的JSFiddle中看到的那樣。

function updateProgress(currentValue, expectedValue){ 
 
    var inProgress = setInterval(function() { 
 
     currentValue = currentValue + 0.25; 
 
     $('#progress-bar').attr('value', currentValue); 
 
     $('#progress-text').text(Math.round(currentValue)); 
 
     if (currentValue == expectedValue) clearInterval(inProgress); 
 
    }, 20); 
 
    } 
 

 

 
updateProgress(50, 100);

<progress id="progress-bar" value="50" max="100"></progress> 
 
<div><span id="progress-text">50</span>%</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我想的功能總是有相同的時間執行，初始值的無外觀。 例如0到 - > 100：4秒，50到 - > 100也是4秒。

我試過，但它不工作：

function updateProgress(currentValue, expectedValue){ 
    var interval = 4000/(expectedValue - currentValue)/4; 

    var inProgress = setInterval(function() { 
     currentValue = currentValue + 0.25; 
     $('#progress-bar').attr('value', currentValue); 
     $('#progress-text').text(Math.round(currentValue)); 
     if (currentValue == expectedValue) clearInterval(inProgress); 
    }, interval); 
} 

updateProgress(50, 100); 

Answer 1

我想我會用​​這一點，這是相當多的就是它的設計。

function updateProgress(currentValue, expectedValue){ 
 
    var valueDelta = expectedValue - currentValue, 
 
     startTime = performance.now(); 
 
     
 
    nextFrame(startTime); 
 
    
 
    function nextFrame(time) { 
 
     var value = Math.min(expectedValue, currentValue + valueDelta * (time - startTime)/4000); 
 
     
 
     setValue(value); 
 
     
 
     if (value !== expectedValue) { 
 
      requestAnimationFrame(nextFrame); 
 
     } 
 
    } 
 
    
 
    function setValue(value) { 
 
     $('#progress-bar').attr('value', value); 
 
     $('#progress-text').text(Math.round(value)); 
 
    } 
 
} 
 

 
updateProgress(50, 100);

<progress id="progress-bar" value="50" max="100"></progress> 
 
<div><span id="progress-text">50</span>%</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

無論您選擇使用​​或setInterval，我認爲關鍵是要立足你對當前時間的動畫，而不是假設定時器將如期調用。

當我運行你的原代碼時，它對我來說工作正常。我的猜測是，問題是計時器沒有按時間表被調用，當間隔很小時，這將取決於平臺。 setInterval在最好的時候並不是非常準確，但是對於全範圍，0到100，您將依靠10ms計時器，這個計時器足夠小，可能會出現問題。