Question

在我的网站上，我有一个进度条，当我点击下载按钮时，进度条就会启动。顺便说一句，我希望它的进展有点慢，所以我想我可以使用setTimeout();。

如果你看看那个jsfiddle，当你点击下载按钮时会发生任何事情。我在firefox上测试了它，控制台告诉我ReferenceError: startTime is not defined。

我该如何解决这个问题？

Answer 1

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

onclick="startTime(i);"应为onclick="startTime(0)"

这一行

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

应该是

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

因为你的名字是prog而不是movingbar

working fiddle

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

后一点通常是最佳做法。您不希望在Javascript中触发eval（看看here）。

工作js f here。

最后，如果你想在结束时让它进展较慢，你可以使用一个简单的技巧：

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 它将在某个时间间隔执行指定的函数。通过这个你可以避免递归

使用起来也很简单。

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

5 个答案: