JavaScript 闭包和 setTimeout答案

【问题标题】：JavaScript Closures and setTimeoutJavaScript 闭包和 setTimeout
【发布时间】：2011-07-25 16:13:08
【问题描述】：

闭包是我在 JS 中还没有完全掌握的东西。我认为这是一个关闭问题。我正在尝试创建一个进度条。每 x 秒我想增加一个 DIV 的宽度。这是应该执行此操作的部分：

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

我想要发生的是每 x 秒，增加条的大小。如果当然，那不是正在发生的事情。

我很确定（希望）这是一个闭包问题，但是与 setTimout 混合使用的语法完全让我感到困惑。任何人都可以帮助我掌握解决此示例中关闭问题所需的概念吗？

【问题讨论】：

标签： javascript closures settimeout

【解决方案1】：

您想使用setInterval，而不是使用setTimeout。后者将在每个间隔调用一次函数，而不是只调用一次。

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

【讨论】：

@mVChr 也这么认为，但他们没有提到它应该永远完成。无论如何，我都会更新一个可以证明这一点的答案
当我运行后者时，我得到一个 setInternal is not defined.
@DA 这是因为我不会拼写。它应该是setInterval 而不是setInternal。我已经更正了我的答案

【解决方案2】：

问题是您正在增加 timeIncrement 内部闭包。因此，在第一次超时发生之前，您根本不会有效地增加它。这是修改后的代码：

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

wIncrement 变量可能仍然存在问题。由于这个原因，我也会使用setInterval 而不是setTimeout。

【讨论】：

啊！所以我必须使用 for 中的变量来增加超时（而不是内部变量）。这行得通！谢谢！