动画计数器完全没有动画-Javascript

我有以下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);
}

window.onload=function（）{
//应该返回像100这样的数字
var total=parseInt（document.getElementById（'foo'）.className）；
功能显示条（条）{
document.getElementById（“bar”）.innerHTML=bar+“bar”；
如果（条<总）{
设置超时（显示条（条+1），20）；
}
}
控制台日志（总计）；
如果（总数>0）显示条（0）；
}

HTML:

100巴

---

因此，我看到的不是逐条递增（用户可见）的预期效果，而是发布的数字（

100

）。我知道问题出在

窗口。onload

上，但如何用其他事件替换

窗口。onload

，以产生我所寻找的结果

主要问题可能在这里：

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

该代码调用

showBars

函数，然后将其返回值传递到

setTimeout

，与

foo（bar（））

调用

bar

并将其返回值传递到

foo

的方式完全相同

如果你把它换成

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

…它将向

setTimeout

传递一个函数，调用该函数时，将调用

showBars

，并将

bars+1

作为参数

实例：（我还删除了以数字开头的类的

class

属性，将

foo

上的属性替换为

data max

，如评论中所述）

window.onload=function（）{
//应该返回像100这样的数字
var total=parseInt（document.getElementById（'foo'）.getAttribute（“数据最大”））；
功能显示条（条）{
document.getElementById（“bar”）.innerHTML=bar+“bar”；
如果（条<总）{
setTimeout（showBars.bind（null，bars+1），20）；
}
}
如果（总数>0）显示条（0）；
};

100条
@T.J.Crowder
条
被定义为函数参数。在HTML中，可以以数字开头（即使这不是CSS标识符）。@T.J.Crowder No，
parseInt
可以。。。我刚刚在一个
警报（总数）
@philippe中看到了正确的数字：它可能在这个或那个浏览器上工作。但依赖无效的东西只会自找麻烦。我建议改为使用
data-*
属性。@T.J.Crowder谢谢你的建议。将按照您的建议修改
HTML
以添加
数据索引编号。@T.J.Crowder请参见：“作者可以在
类
属性中使用的令牌没有其他限制”。并且接受
标题
；-）或者您可以将函数调用包装在一个函数中：`function（）{showBars（bars+1）；}`@Jakar：在这种情况下，确实可以，因为
bars
在运行之前不会更改。
setTimeout(showBars.bind(null, bars + 1), 20);