Почему мы тело цикла оборачиваем в функцию?

Question

[Александр]

Вопрос по задаче. Почему мы тело цикла оборачиваем в функцию и почему без нее ничго не работает?

function replaceImg() {
      var divs = document.querySelectorAll('div.img-replace');
      for (var i = 0; i < divs.length; i++)(function(i) {
        var img = document.createElement('img');
        img.src = divs[i].getAttribute('data-src');
        img.className = 'img-replace';
        img.onload = function() {
          divs[i].parentNode.replaceChild(img, divs[i]);
        }
      }(i))
    }
    setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации

Answer 1

[Сергей Горностаев]

Потому, что onload выполняется асинхронно. На момент её выполнения цикл уже может закончиться и переменная цикла i будет иметь конечное значение, равное divs.length. Оборачивая тело цикла в анонимную функцию, мы создаём замыкание, в котором i неизменна.

Comments

[Кирилл]

Небольшая поправка, не "может закончиться" а точно закончиться. JS однопоточный и не предполагает прерывания синхронного кода.

Answer 2

[Иван Кондратьев]

Потому что во время события load цикл может уже закончиться и переменная i будет отличная от той которая нам была нужна.
В данном случаи анонимная функция используется для замыкания и переменная i всегда октуальна