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