JavaScript - 진행률 표시 줄 업데이트 - 함수에 시간이 걸리는지 확인하십시오.

Question

내 페이지에 간단한 진행 표시 줄이 있습니다. 매 초마다 업데이트됩니다 (아마도 잔인 함). 그러나 업데이트 사이에는 애니메이션이 없습니다. 내가 진행률 표시 줄이 아니라 다음

한 값에서 점프보다 더 많은 유체 싶습니다 등

...> 23 % -> 15 % - 10 % :

는 현재 업데이트는 다음과 같이

function update() { 
    current += 10; 
    // what can I do here to make the animation more fluid? 
    // so that it looks like 10% -> 11% -> 12% 
    // similar to 'fast' animation or 'slow' animation 
    $("progress").val(current); 
    if (current >= max) clearInterval(interval); 

    console.log(current); 
}; 

http://jsfiddle.net/VFx3L/1/

내가 이상적으로 다른 하나 개의 값에서 업데이트처럼 1 초 걸릴 것입니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

그때 100에 간격을 감소,이 작은 단계를 만드는 일 대신 10의 추가 업데이 트를 감소 ..이보다 유연한 막대를 생성

$(function() { 
    var current = 0; 
    var max = 100; 

    function update() { 
     current += 1; 
     // what can I do here to make the animation more fluid? 
     $("progress").val(current); 
     if (current >= max) clearInterval(interval); 

     console.log(current); 
    }; 
    var interval = setInterval(update, 100); //choose how fast to update 
}); 

새 바이올린을 http://jsfiddle.net/72SG9/

감사

를 참조하십시오

아담