动画计数器没有动画- Javascript

Animated counter not animating at all - Javascript

本文关键字：动画 Javascript 计数器      更新时间：2023-09-26

我有以下JavaScript动画:

window.onload = function() {
    // should return a number like 100
    var total = parseInt(document.getElementById('foo').className);
    function showBars(bars) {
        document.getElementById("bar").innerHTML = bars + " bars";
        if (bars < total) {
            setTimeout(showBars(bars + 1), 20);
        }
    }
    console.log(total);
    if (total > 0) showBars(0);
}
HTML: 

<span id="foo" class="100" />
<p id='bar' class='100'>100 Bars</p>

因此，我只看到发布的数字(100)，而不是一个接一个地增加柱(用户可见)的预期效果。我知道问题是在window.onload上，但我怎么能用其他事件来代替window.onload，这将产生我正在寻找的结果?

可能主要问题在这里:

setTimeout(showBars(bars + 1), 20);

代码调用 showBars函数并将其返回值传递给setTimeout，就像foo(bar()) 调用 bar并将其返回值传递给foo一样。

如果用

代替
setTimeout(showBars.bind(null, bars + 1), 20);

…它将传递一个函数给setTimeout，当该函数被调用时，将以bars + 1作为参数调用showBars。

现场示例:(我还删除了class属性，以数字开头的类，用data-max替换foo上的属性，如注释中所讨论的)

window.onload = function() {
    // should return a number like 100
    var total = parseInt(document.getElementById('foo').getAttribute("data-max"));
    function showBars(bars) {
        document.getElementById("bar").innerHTML = bars + " bars";
        if (bars < total) {
            setTimeout(showBars.bind(null, bars + 1), 20);
        }
    }
    if (total > 0) showBars(0);
};
<span id="foo" data-max="180" />
<p id='bar'>100 Bars</p>

相关文章：