Question

我从来没有能够正确使用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>

Answer 1

setTimeout不是sleep（JavaScript没有sleep）。

当您循环播放时，将功能设置为在500毫秒内运行，然后立即将其设置为在500毫秒内再次运行，依此类推。如此有效，您将其设置为在500毫秒内运行100次，并在第一次执行之前将i设置为100（因为它需要一个JS引擎少于半秒才能运行该循环100次）。

你想要更像这样的东西：

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

Answer 2

问题是变量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);
}

您可以查看closures部分javascript花园以获取解释和其他可能的解决方案。

使用setTimeout函数时出现问题

2 个答案: