调用setTimeout来减少值

calling setTimeout to decrease value

本文关键字：setTimeout 调用      更新时间：2023-09-26

我创建了一个检查密码强度的工具。结果以0到100之间的数字表示。为了让事情变得更好，我创建了一个setTimeout函数，使数字像计数器一样逐渐增加或减少。

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

问题是您在超时运行之前更新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/

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

相关文章：