javascript - 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 + "%";

prog因为你的 div名称是movingbar

工作小提琴

Answer 2

设置onclick="startTime(i);" 为onclick="startTime(0);"

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

这是JSBin

Answer 3

在函数 parm 中设置值

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

后一点通常是最佳实践。您不想eval在 Javascript 中触发（看看这里）。

工作的 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 它将在某个时间间隔执行指定的功能。这样可以避免递归

它也很容易使用。