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

此外，在某些时候，您可能希望结束间隔并停止增加大小。为此，您需要对 setInterval 的结果调用 clearInterval

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