Question

I created a tool that checks a password strength. the result is given as a number between 0 to 100. to make things nicer, I created a setTimeout function to make the numbers increase or decrease gradually like a counter.

here is a link to the full code in jsfiddle

you will notice that the function works properly when the value increases but not when the value decreases. I believe the problem is in this piece of code:

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

The issue is that you are updating lastGrade before the timeouts run. This was actually affecting both the up and down meter animation, but was more apparent on the decreasing animation.

A more functional example is here: http://jsfiddle.net/MrywR/

However, you’ll probably want to tweak the code so that lastGrade is used as the animation meter, to keep the bar from bouncing.

Changed code:

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);

---

Update

This version handles the animation much better overall: http://jsfiddle.net/5yeP7/1/

It handles quick typing, removes some unnecessary closures, and encapsulates the methods as local variables.