javascript - 使用 jQuery 对每个数字使用相同的时间使数字增长

Question

我的目标是执行一个 jQuery 脚本，该脚本将使任何数字在视觉上从零增长到使用 setInterval() 达到其值。

这是我想到的:

$('.grow').each(function() {
        var $el = $(this);
        var max = parseInt($el.text().replace(/\s/g, ''));
        var refresh = 5;
        var start = 0;
        var step = 1;
        var interval = window.setInterval(function() {
            start += step;
            $el.text(start);
            if(start >= max)
                clearInterval(interval);
        }, refresh);
    });

我的问题是我的数字从几百到几十万不等。使用此脚本，较大的数字需要更多时间才能达到其值。

我的目标是让任何数字，无论其目标值如何，都需要相同的时间来达到它。我觉得我应该将该数字除以我希望动画运行的秒数，然后将结果设置为间隔步骤？

我正在询问，但仍在寻求帮助:)

谢谢。

Answer 1

$('.grow').each(function() {
    var $el = $(this);
    var max = parseInt($el.text().replace(/\s/g, ''));
    var duration = 1000; // shared duration of all elements' animation
    var refresh = 5;
    var frames = duration / refresh; // number of frames (steps)
    var start = 0;
    var step = Math.max(Math.round(max / frames), 1); // step should be >= 1
    var interval = window.setInterval(function() {
        if(start + step < max) {
            start += step;
        }
        else {
            start = max;
            clearInterval(interval);
        }
        $el.text(start);
    }, refresh);
});