調用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/

它處理快速打字，去除一些不必要的關閉，並封閉該方法作爲局部變量。