Не увеличивается значение переменной при инкременте [дубликат]

282

06 июля 2022, 18:10

На этот вопрос уже даны ответы здесь:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания (3 ответа)

Закрыт 1 год назад.

Всем привет, не подскажете почему счетчик counter не увеличивается при инкременте? По идее ведь у меня три картины и трижды должен сработать

function preloadImages(sources) {
    let counter = 0;
    for (const source of sources) {
        let img = document.createElement('img');
        img.onerror = img.onload = () => {
            counter++;
        }
        img.src = source;
    }
    console.log(counter);
}

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"
];
preloadImages(sources);

При проверке внутри цикла переменная увеличивается, но не выходит будто из этого цикла. Срабатывает если функцию отдельно написать для события. Событие не позволяет изменять значение внешней переменной или что?

Answer 1

ну по идее у вас все ок, просто загрузка изображений - код асинхронный, поэтому вы видите значение счётчика еще до того, как изображения были загружены (или произошла ошибка)

let counter = 0;
function preloadImages(sources) {
    for (const source of sources) {
        let img = document.createElement('img');
        img.onerror = img.onload = () => {
            counter++;
        }
        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"
];
preloadImages(sources);

console.log("счётчик сразу после завершения выполнения функции:", counter);
setTimeout(() => console.log("счетчик по таймеру:", counter), 1000);

Answer 2

async function preloadImages(links) {
    let counter = 0;
    
    async function createImage(link) {
        const img = document.createElement('img');
        img.src = link;
        return new Promise((resolve, reject) => {
            img.onload = () => {
                document.body.appendChild(img);
                resolve();
            };
            img.onerror = (e) => reject(e);
        });
    }
    for (const link of links) {
        try {
            await createImage(link);
            counter++;
            console.log(counter, link);
        } catch (e) {
            console.log('Ошибка загрузки изображения - ', link);
        }
    }
    
    return counter;
}

const links = [
    "https://en.js.cx/images-load/1.jpg",
    "https://en.js.cx/images-load/2.jpg 123",
    "https://en.js.cx/images-load/3.jpg"
];
preloadImages(links).then(count => {
    console.log('Изображений загружено: %s/%s', count, links.length);
});