javascript - 动画数字递增

Question

我正在尝试制作一个简单的 Javascript 动画，它会增加一个数字，直到它达到目标数字。但是，我现在这样做的方式不起作用。

这是我的代码：http: //jsfiddle.net/nLMem/4/

HTML

<div id="number">5</div>

JS

$(document).ready(function() {
    var target = 50;
    var number = $('#number').text();

    while(number <= target) {
        setTimeout(function() {
            $('#number').text(++number);
        }, 30);
    }
});

Answer 1

这与您想要的类似：

   var interval = setInterval(function() {
        $('#number').text(number);
        if (number >= target) clearInterval(interval);
        number++;
    }, 30);

您的 while 循环将导致脚本执行在其工作时“冻结”。它不投票。另一个问题是您setTimeout可能会调用 50 次。您只需拨打setInterval一次，并在达到目标号码后清除。

Answer 2

这是一个基于 user1508519 代码的解决方案，自动递增/递减，并在 ajax 搜索/过滤后在我的页面上实时更新：

function animateResultCount(number, target, elem) {
    if(number < target) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (number >= target) {
                clearInterval(interval);
                return;
            }
            number++;
        }, 30);
    }
    if(target < number) {
        var interval = setInterval(function() {
            $(elem).text(number);
            if (target >= number) {
                clearInterval(interval);
                return;
            }
            number--;
        }, 30);
    }
}

在ajax成功中调用我的函数：

...
success: function(response) {
    $('div#results').html(response.html);
    animateResultCount($('#rescount').html(),response.newcount,'#rescount');
}
...