JavaScript關閉和setTimeout

Question

閉包是我仍然不完全掌握在JS中的東西。我認爲這是一個關閉問題。我正在嘗試創建一個進度條。每x秒我想增加一個DIV的寬度。下面是應該做的是，部分：

for(i=0;i<=counter;i++){ 
    setTimeout(function(){ 
     myDiv.style.width = wIncrement+"px" 
     timeIncrement++; 
     wIncrement++; 
    },timeIncrement*1000); 
} 

我希望發生的是每x秒，加大棒的大小。如果當然，那不是發生了什麼。

我非常確定（希望）這是一個關閉問題，但與setTimout混合的語法完全使我困惑。任何人都可以幫助我理解在這個例子中解決關閉問題所需的概念嗎？

Answer 1

事情的結果是，你遞增timeIncrement內關閉。所以有效地，你不會增加它在所有直到第一次超時發生。以下是更改的代碼：

for(i=0;i<=counter;i++){ 
    setTimeout(function(){ 
     myDiv.style.width = wIncrement+"px" 
     wIncrement++; 
    }, i*1000); 
} 

您仍可能會遇到wIncrement變量問題。由於這個原因，我也會使用setInterval而不是setTimeout。

Answer 2

而不是使用setTimeout要使用setInterval。後者將每間隔一次而不是一次調用該函數。

var width = 50 
setInternal(function() { 
    myDiv.style.width = width 
    width++ 
    }, timeIncrement * 1000); 

此外，在某些時候，您可能想要結束間隔並停止遞增大小。對於您將需要調用clearInterval上的setInterval

var width = 50 
var t = setInterval(function() { 
    myDiv.style.width = width 
    width++ 
    if (doneIncrementing) { 
    clearInterval(t); 
    } 
    }, timeIncrement * 1000);