Javascript setTimeout（）; for ProgressBar不起作用

Question

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

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

如果你看看那的jsfiddle，当您单击下载按钮有什么事情发生。我已经在Firefox上测试过，控制台告诉我ReferenceError: startTime is not defined。

我该如何解决这个问题？

Answer 1

你有一些错误JSBin

Answer 2

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

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

这里是在功能PARM

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

JSFIDDLE

Answer 3

设定值S IN拨弄你共享

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

2. 行

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

应该

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

为您div名称为prog代替movingbar

working fiddle

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小提琴here。

最后，如果你想让它进步慢，你到达终点，你可以使用一个简单的一招：

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

Answer 5

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

或者只是粘贴此代码无需调用开始时间（）时，通过参数

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

它也很容易使用。