使用setTimeout函数时遇到问题

Question

I've never been able to properly use the setTimeout function, so I tried writing a sample script to update a progress bar, but again, it does not work. 我从来没有能够正确使用setTimeout函数，所以我尝试编写示例脚本来更新进度条，但是同样，它不起作用。 Instead, the entire program runs before the progress bar is updated to 100%. 而是在进度条更新为100％之前运行整个程序。 Would somebody be able to look at this code and tell me what I'm doing wrong? 有人可以看一下这段代码，然后告诉我我在做什么错吗？

The code I'm trying to use is from http://digitalbush.com/projects/progress-bar-plugin/ 我尝试使用的代码来自http://digitalbush.com/projects/progress-bar-plugin/

Thanks! 谢谢！

<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>

Answer 1

setTimeout is not sleep (JavaScript doesn't have a sleep ). setTimeout不是sleep （JavaScript没有sleep ）。

As you loop round, you set the function to run in 500ms, then you immediately set it to run again in 500ms, and so on. 循环时，将功能设置为在500ms内运行，然后立即将其设置为在500ms内再次运行，依此类推。 So effectively, you set it to run 100 times in 500ms, and have set i to 100 before the first time it executes (since it takes a JS engine less then half a second to run that for loop 100 times). 如此有效，您可以将其设置为在500毫秒内运行100次，并在首次执行前将i设置为100（因为JS引擎花不到半秒的时间就可以将其运行100次）。

You want something more like this: 您想要更多类似这样的东西：

var interval, i = 0;
interval = setInterval(function () {
    if (i === 100) {
        clearInterval(interval);
    } else {
        $("#progressbar").reportprogress(i);
        i++;
    }
}, 500);

Answer 2

The issue is that variable i becomes the part of the closure and, when the function is executed, is already equal to 100 . 问题是变量i成为闭包的一部分，并且在执行函数时已经等于100 。

The code you have currently literally creates a hundred of timeouts referencing the same variable(global i). 您当前拥有的代码实际上会创建一百个引用同一变量的超时（全局i）。 By the time all of the functions are executed, i equals 100, therefore you report 100 as current progress 100 times. 到执行所有功能时，i等于100，因此您将100作为当前进度报告为100。

The proper version should look like that: 正确的版本应如下所示：

function run() {
    var i = 0;
    setTimeout( function updateProgress() {
        $("#progressbar").reportprogress(i++);
        if (i < 100){
            setTimeout(updateProgress, 500);
        }
    }, 500);
}

You could check closures part of javascript garden for explanation and possible other solutions. 您可以检查javascript花园的闭包部分以获取解释和可能的其他解决方案。

使用setTimeout函数时遇到问题

问题描述

2 个解决方案

解决方案1
3 2011-10-06 19:02:53

解决方案2
2 已采纳 2011-10-06 19:00:01

使用setTimeout函数时遇到问题

问题描述

2 个解决方案

解决方案1 3 2011-10-06 19:02:53

解决方案2 2 已采纳 2011-10-06 19:00:01

解决方案1
3 2011-10-06 19:02:53

解决方案2
2 已采纳 2011-10-06 19:00:01