두 개의 setInterval이 같은 시간에 끝나도록하는 방법

Question

JS 애니메이션이있는 간단한 진행 표시 줄이 있습니다. 20ms마다 진행률 막대의 값이 0.25 씩 증가합니다. 아래의 JSFiddle에서 볼 수 있듯이 진행 막대를 완료하는 데 20 * 4 * 100ms = 8 초가 걸립니다. 나도 같은 코드를 가지고 대신 0 % 50 %의 진행률 표시 줄을 시작하는 경우

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>

그래서, 그것은 진행률 표시 줄을 완료 4 초 20 * 4 * 50ms의의 = 걸릴 것입니다, 아래 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

은 내가 이것에 대한 requestAnimationFrame 사용하는 거라고 생각이 꽤 많이가를 위해 설계된 것입니다. 당신이 requestAnimationFrame 또는 setInterval 사용을 선택 여부

는

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은 최상의 시간에는 최고로 정확하지 않지만 0에서 100까지의 전체 범위에서 문제가되기에 충분히 작은 10ms 타이머를 사용하게됩니다.