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混合使用的语法完全困扰了我。有人可以帮助我理解如何解决这个示例中的闭包问题吗？

- DA.

Answer 1

问题在于你正在闭包内增加一个timeIncrement。因此，在第一次超时发生之前，你实际上没有增加它。以下是更改后的代码：

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

你可能仍然会遇到wIncrement变量的问题。为此，我建议使用setInterval而不是setTimeout。

- Snowbear

---

啊！所以我必须使用for循环中的变量来增加超时时间（而不是内部变量）。这样可以正常工作！谢谢！ - DA.

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

- JaredPar

---

@mVChr 也这么认为，但他们没有提到它应该永远完成。无论如何，我会更新一个演示这一点的答案。 - JaredPar

当我运行后者时，我得到了一个 setInternal 未定义的错误。 - DA.

@DA 这是因为我拼错了。应该是 setInterval 而不是 setInternal。我已经更正了我的答案。 - JaredPar