Крошечный вопрос о закрытии JavaScript

Question

Я хочу изменить ширину элемента, чтобы сделать простую анимацию вот код:

function mysildeDown(elem) {
    var fullw = parseInt(getStyle(elem, 'width'));

    elem.style['width'] = 0;

    for (var j=0; j < 100; j++) {
        (function () {
            **var i=j;**
            setTimeout(function () {
                elem.style['width'] = (i / 100) * fullw + 'px';
            }, (i + 1) * 10 );
        })();
    }
}

// функция GetStyle не проблема
Интересно, почему я должен использовать var i = j, спасибо большое

Answer 1

Обычно при выполнении чего-то подобного внутри цикла и использовании значения j в другой функции функция всегда заканчивается последним значением j. Итак, вам нужно найти способ использовать значение j, как это было при создании этой функции внутри цикла.

Я обычно вижу способ передать его как параметр в немедленно вызванной функции, как показано ниже.

function mysildeDown(elem){
  var fullw=parseInt(getStyle(elem,'width'));

  elem.style['width']=0;
  for(var j=0;j<100;j++){
    (function(i){
      setTimeout(function(){
        elem.style['width']= (i/100)*fullw+'px';
      },(i+1)*10)
    })(j);
  }
}

Answer 2

Так что у меня будет значение j в функции таймера во время вызова setTimeout. По сути, вы сохраняете значение j, которое будет использоваться при срабатывании таймера.

Answer 3

с использованием ключевого слова var при определении переменной в javascript объявляет ее в рамках текущей строки кода.В вашем конкретном случае, если вы не использовали ключевое слово var при объявлении переменной i, тогда i будет глобальным, что может вызвать проблемы, так как это обычно используется в циклах for.

Используя ключевое слово var внутри функции, ваша переменная i является локальной для функции и недоступна вне области действия этой функции.

Есть некоторая полезная информация здесь .