2つのsetIntervalが同じ時刻になるようにする方法

Question

私はJSアニメーションで簡単なプログレスバーを持っています。 20msごとに、プログレスバーの値は0.25増加します。下のJSFiddleで見ることができるように、プログレスバーを完成するには20 * 4 * 100ms = 8秒かかります。

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>

私は、開始値のlooklessを常に実行するために同じ時間を持っている機能をしたいと思います。 たとえば、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タイマーに頼ることになります。