javascript - 调用 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/

它处理快速输入，删除一些不必要的闭包，并将方法封装为局部变量。