javascript - 如何增加javascript进度条的进度？

Question

我正在尝试向我的网站添加一个简单的 javascript 进度条，我发现了一些脚本，但我总是遇到同样的问题 - 我能够初始化加载程序并将其设置为递增到给定值，但不能分步进行。这是一个简单的例子 - https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/

最后有:

bar.animate(1.0);

我怎样才能让它逐步动画化？假设先达到 50%，然后(2 秒后)达到 75%，然后达到 100%。我试过了

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

以及:

setTimeout(function(){bar.animate(0.5)}, 2000);
setTimeout(function(){bar.animate(0.75)}, 2000);
setTimeout(function(){bar.animate(1)}, 2000);

但它总是选择最后一个(最高)值，而不是按步骤进行动画处理。任何建议均已采纳。

Answer 1

bar.animate(0.5);
bar.animate(0.75);
bar.animate(1);

上面的代码同时运行，最后一个代码会覆盖其他代码。

setTimeout(function(){bar.animate(0.5); console.log("animate")}, 2000);
    console.log('timeout 1 called');
 setTimeout(function(){bar.animate(0.75); console.log("animate")}, 2000);
    console.log('timeout 2 called');
setTimeout(function(){bar.animate(1); console.log("animate")}, 2000);
    console.log('timeout 3 called');

一旦设置了第一个超时，它就不会等待延迟再设置下一个超时。检查控制台上的日志，看看发生了什么。

问题是这些脚本同时运行。做这样的事情(或更好的事情):

bar.animate(0.5);  // Number from 0.0 to 1.0
setTimeout(function () {
    bar.animate(0.75);
}, 2000);

setTimeout(function () {
    bar.animate(1.0);
}, 4000);

如果您只是想按顺序对栏进行动画处理，您也可以使用 CSS 制作关键帧。