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