Question

我有以下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？

Answer 1

可能主要问题在于：

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

该代码调用 showBars函数，然后将其返回值传递到setTimeout，就像foo(bar()) 调用 {一样{1}}并将其返回值传递给bar。

如果用

替换它

foo

...它会将一个函数传递给setTimeout(showBars.bind(null, bars + 1), 20);，在调用时，会以setTimeout作为参数调用showBars。

实例 （我还删除了两个bars + 1属性，其中的类以数字开头，将class上的一个替换为foo，如所讨论的那样在评论中）

＆＃13;

data-max

＆＃13;

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

＆＃13;

动画计数器根本没有动画 - Javascript

1 个答案: