使用setTimeout函數時遇到問題

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

循環時，將功能設置為在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);

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);
}

您可以檢查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