[英]Trouble using setTimeout function
我从来没有能够正确使用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
)。
循环时,将功能设置为在500ms内运行,然后立即将其设置为在500ms内再次运行,依此类推。 如此有效,您可以将其设置为在500毫秒内运行100次,并在首次执行前将i
设置为100(因为JS引擎花不到半秒的时间就可以将其运行100次)。
您想要更多类似这样的东西:
var interval, i = 0;
interval = setInterval(function () {
if (i === 100) {
clearInterval(interval);
} else {
$("#progressbar").reportprogress(i);
i++;
}
}, 500);
问题是变量i
成为闭包的一部分,并且在执行函数时已经等于100
。
您当前拥有的代码实际上会创建一百个引用同一变量的超时(全局i)。 到执行所有功能时,i等于100,因此您将100作为当前进度报告为100。
正确的版本应如下所示:
function run() {
var i = 0;
setTimeout( function updateProgress() {
$("#progressbar").reportprogress(i++);
if (i < 100){
setTimeout(updateProgress, 500);
}
}, 500);
}
您可以检查javascript花园的闭包部分以获取解释和可能的其他解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.