Есть код (
из данной задачи)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function preloadImages(sources, callback) {
let counter = 0;
function onLoad() {
counter++;
if (counter == sources.length) callback();
}
for(let source of sources) {
let img = document.createElement('img');
img.onload = img.onerror = onLoad;
img.src = source;
}
}
// ---------- тест ----------
let sources = [
"https://en.js.cx/images-load/1.jpg",
"https://en.js.cx/images-load/2.jpg",
"https://en.js.cx/images-load/3.jpg"
];
// добавляем случайные символы к ссылкам, чтобы избежать кеширования
for (let i = 0; i < sources.length; i++) {
sources[i] += '?' + Math.random();
}
// для каждого изображения
// создадим другое изображение с аналогичным src и проверим, есть ли у нас его ширина
function testLoaded() {
let widthSum = 0;
for (let i = 0; i < sources.length; i++) {
let img = document.createElement('img');
img.src = sources[i];
widthSum += img.width;
}
alert(widthSum);
}
// должно выводиться 300
preloadImages(sources, testLoaded);
</script>
</body>
</html>
Подскажите почему в этом моменте :
let counter = 0;
function onLoad() {
counter++;
if (counter == sources.length) callback();
}
for(let source of sources) {
let img = document.createElement('img');
img.onload = img.onerror = onLoad;
img.src = source;
}
изменения в counter видны только в обработчиках событий? Я имею ввиду что они всегда увеличиваются на 1.
А если код будет такой
let counter = 0;
for (let j = 0; j < sources.length; j++) {
let img = document.createElement('img');
img.src = sources[j];
img.onload = counter++;
img.onerror = counter++;
if (counter == sources.length) callback();
}
}
то на 2 и функция callback не заработает.
Или изменения в обработчиках событий не видны внешнему окружению?
