値を減らすために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を更新しているということです。これは、アップメーターとダウンメーターのアニメーションの両方に実際に影響していましたが、アニメーションが減少するにつれて明らかになりました。

より機能の例はここにある：しかし、あなたはおそらくlastGradeが弾むからバーを保つために、アニメーションメータとして使用されるようにコードを微調整したいと思うhttp://jsfiddle.net/MrywR/

。

変更コード：

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/

それは、迅速なタイピングを扱ういくつかの不要なクロージャを除去し、そしてカプセル化ローカル変数としてのメソッド