我一直无法正确使用 setTimeout 函数，因此我尝试编写示例脚本来更新进度条，但同样，它不起作用。相反，整个程序会在进度条更新到 100% 之前运行。有人可以查看这段代码并告诉我我做错了什么吗？
我尝试使用的代码来自 http://digitalbush.com/projects/progress-bar-plugin/
谢谢!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2007/02/jqueryprogressbar.js" type="text/javascript"></script>
<title>Progress Bar test</title>
</head>
<body>
<style>
/* progress bar container */
#progressbar{
border:1px solid black;
width:200px;
height:20px;
position:relative;
color:black;
}
/* color bar */
#progressbar div.progress{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
#progressbar div.text{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
<div id="progressbar"></div>
<input type='button' value='start' onClick='run()' />
<script>
function run() {
for (i=0; i<100; i++) {
setTimeout( function() {
$("#progressbar").reportprogress(i);
}, 500);
}
}
</script>
</body>
</html>
最佳答案
setTimeout 不是 sleep(JavaScript 没有 sleep)。
循环时，您将函数设置为在 500 毫秒内运行，然后立即将其设置为在 500 毫秒内再次运行，依此类推。因此，您可以有效地将其设置为在 500 毫秒内运行 100 次，并在第一次执行之前将 i 设置为 100(因为 JS 引擎运行 for 循环 100 所需的时间不到半秒)次)。
你想要更像这样的东西:
var interval, i = 0;
interval = setInterval(function () {
if (i === 100) {
clearInterval(interval);
} else {
$("#progressbar").reportprogress(i);
i++;
}
}, 500);
关于javascript - 使用 setTimeout 函数时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7679096/