Javascript setTimeout（）; 对于ProgressBar不起作用

Question

在我的网站上，我有一个进度栏，当我单击“ 下载”按钮时，进度栏将启动。 顺便说一下，我希望它进展缓慢，所以我想可以使用setTimeout(); 。

http://jsfiddle.net/pHxSy/9/

如果您查看该jsfiddle，则单击“ 下载”按钮会发生任何事情。 我已经在firefox上进行了测试，控制台告诉我ReferenceError: startTime is not defined 。

我该如何解决？

Answer 1

您分享的小提琴中有一些错误

1. onclick="startTime(i);" 应该是onclick="startTime(0)"

2. 线

    document.getElementById("movingbar").style.width = i + "%"; 

应该

   document.getElementById("prog").style.width = i + "%";

因为你的div名称是prog而不是movingbar

工作小提琴

Answer 2

设置您的onclick="startTime(i);" 如onclick="startTime(0);"

<input value="Download" type="button" onclick="startTime(0);">

这是JSBin

Answer 3

在功能参数中设置值

<input value="Download" type="button" onclick="startTime(0);">

JSFIDDLE

Answer 4

您走在正确的道路上，只需进行一些修复即可：

• onclick="startTime(i);" 应该是onclick="startTime(0);"
• .getElementById("movingbar")应该是.getElementById("prog")
• setTimeout('startTime('+i+')',50); 应该设置为setTimeout(function(){ startTime(i); }, 50); 。

后者通常是最佳实践。 您不想在Javascript中触发eval （ 在此处查看 ）。

工作中的js 在这里摆弄。

最后，如果您想在到达终点时使其速度变慢，可以使用一个简单的技巧：

setTimeout(function(){ startTime(i); }, 50 + i);

Answer 5

您可以找到工作的小提琴http://jsfiddle.net/BWamw/

或仅粘贴此代码，无需在调用startTime（）时传递参数

var progress = 0;
var interval;
function startTime() {
    interval = window.setInterval(function () {
       document.getElementById("prog").style.width = progress + "%";
       progress++;
       if (progress >= 100) {
           interval =window.clearInterval(interval)
       }
    }, 100)
}

您最好设置setInterval，它将每隔一段时间执行指定的功能。 这样可以避免递归

它也很容易使用。