값을 줄이기 위해 setTimeout을 호출합니다.

Question

암호 강도를 검사하는 도구를 만들었습니다. 결과는 0에서 100 사이의 숫자로 주어집니다. 더 좋게하려면 숫자를 카운터처럼 점차적으로 늘리거나 줄이기 위해 setTimeout 함수를 만들었습니다. 여기

당신이 기능이 제대로 작동하는지 알 것 full code in jsfiddle

에 대한 링크 때 값이 증가하지만 값이 감소하지 않을 때. 나는 문제는이 코드 조각이라고 생각 :

function run() { 
    var i = lastGrade; 

    setTimeout(function updateProgress() { 
     x.style.width = i*1.5 + 'px'; 
     s.innerHTML = i + '%'; 
     if(lastGrade <= grade) { 
      if (i < grade){ 
       setTimeout(updateProgress, 10); 
      } 
      i++; 
     } 
     else if(lastGrade > grade) { 
      if (i > grade){ 
       setTimeout(updateProgress, 10); 
      } 
      i--; 
     } 
    }, 10); 
} 

Answer 1

문제는 당신이 시간 제한을 실행하기 전에 lastGrade를 업데이트하는 것입니다. 이것은 실제로 위아래 미터 애니메이션에 영향을 미치지 만 애니메이션이 감소하면 더 분명합니다.

더 기능적인 예를

은 여기에 있습니다 : http://jsfiddle.net/MrywR/

그러나, 당신은 아마 lastGrade 수신 거부에서 막대를 유지하기 위해, 애니메이션 미터로 사용되도록 코드를 조정할 할 수 있습니다.

변경된 코드 :

setTimeout(function updateProgress() { 
    x.style.width = i*1.5 + 'px'; 
    s.innerHTML = i + '%'; 
    if(lastGrade <= grade) { 
     if (i < grade){ 
      setTimeout(updateProgress, 10); 
     } else { 
      lastGrade = grade; 
     } 
     i++; 
    } 
    else if(lastGrade > grade) { 
     if (i > grade){ 
      setTimeout(updateProgress, 10); 
     } else { 
      lastGrade = grade; 
     } 
     i--; 
    } 
}, 10); 

---

업데이트

이 버전은 훨씬 더 전체 애니메이션을 처리합니다 http://jsfiddle.net/5yeP7/1/

그것은 빠른 입력을 처리하는 불필요한 폐쇄를 제거하고, 캡슐화 로컬 변수로서의 메소드